Added watermark to the page

Question

Watermark Add

Adding watermark

function saveScreassenShot(Z) {
    var H = document.getElementById(jwplayer(Z).id);
    var B = (H) ? H.querySelector("video") : undefined;
    if (B) {
    //jwplayer(wqw).pause(!0);
    var F = 1;
    var D = document.createElement("canvas");
    D.width = B.videoWidth * F;
    D.height = B.videoHeight * F;
    Dwidth = window.innerWidth * 0.5;
    Dwidth100 = Dwidth / (D.width / 100);
    Dheight = (D.height / 100) * Dwidth100;
    if (Dheight > 600) {

    var I = document.createElement("a");
    I.innerHTML = "close";
    E = "display: inline-block; margin: 0px auto;background-color: #337ab7;";
    E += "margin-top: 10px; padding: 5px 10px;";
    E += "color: #fff; border-radius: 5px; border: 1px solid #ccc; cursor: pointer;";
    I.setAttribute("style", E);
    I.onclick = function() {
    document.getElementById("popupSave").remove()
    };
    G.appendChild(J);
    G.appendChild(C);
    G.appendChild(I);
    document.body.appendChild(G)
    //jwplayer().play()
    }
    }

Thanks for the help everyone :) it was greatly appreciated i have figured out a way to get it working!

PranshuKhandal · Answer 1 · 2019-01-18T18:15:11.207

0

To add your watermark, firstly you should have that watermark image already loaded on your page. And all your code should run after it.

var WI = new Image();
WI.onload = function () {
  // code to activate screenshot button
}
WI.src = "path/to/your/watermark";

secondly you should store your 2d context of canvas in a variable, so that it can be reused. And change the code to this.

var CT = D.getContext("2d");
CT.drawImage(B, 0, 0, D.width, D.height);
CT.drawImage(WI, D.width - WI.width, 0, WI.width, WI.height);

This should fit your requirement.

EDIT: here "WI" is the watermark image already loaded

function saveScreenShot(Z) {
var H = document.getElementById(jwplayer(Z).id);
var B = (H) ? H.querySelector("video") : undefined;
if (B) {
//jwplayer().pause(!0);
var F = 1;
var D = document.createElement("canvas");
D.width = B.videoWidth * F;
D.height = B.videoHeight * F;
Dwidth = window.innerWidth * 0.5;
Dwidth100 = Dwidth / (D.width / 100);
Dheight = (D.height / 100) * Dwidth100;
if (Dheight > 600) {
Dheight = 600;
Dheight100 = Dheight / (D.height / 100);
Dwidth = D.width / 100 * Dheight100
}
D.setAttribute("style", "height:" + Dheight + "px");
var CT = D.getContext("2d");
CT.drawImage(B, 0, 0, D.width, D.height);
CT.drawImage(WI, D.width - WI.width, 0, WI.width, WI.height);
var G = document.createElement("div");
var K = (window.innerHeight - Dheight - 50) / 2 + "px";
var L = (window.innerWidth - Dwidth) / 2 + "px";
if (window.innerWidth < 450) {
L = "0px";
Dwidth = window.innerWidth
}
var C = document.createElement("div");
var E = "position: fixed;z-index: 9999999999999;width:" + Dwidth + "px; left: " + L + ";top:0;margin-top:60px";
E += ";padding-bottom:10px; background: #292929;border-radius:5px;";
E += "text-align: center;";
C.setAttribute("style", "display: block;");
C.appendChild(D);
G.setAttribute("id", "popupSave");
G.setAttribute("style", E);
var J = document.createElement("span");
J.innerHTML = 'Right click to Save your Image..';
J.setAttribute("style", "margin: 10px;display: block;font-weight: bold; color: #fff;");
var I = document.createElement("a");
I.innerHTML = "close";
E = "display: inline-block; margin: 0px auto;background-color: #337ab7;";
E += "margin-top: 10px; padding: 5px 10px;";
E += "color: #fff; border-radius: 5px; border: 1px solid #ccc; cursor: pointer;";
I.setAttribute("style", E);
I.onclick = function() {
 document.getElementById("popupSave").remove()
};
G.appendChild(J);
G.appendChild(C);
G.appendChild(I);
document.body.appendChild(G)
//jwplayer().play()
}
}

edited Jan 18 '19 at 18:15

answered Jan 18 '19 at 17:37

PranshuKhandal

739
7
19

1

Im so confused ive tried adding all that and it didnt work but im pretty sure i did it wrong ive edited my code with the full page code of everything on the page aswell as a sample watermark image what would need moved and changes – Jan 18 '19 at 17:47
what change did you actually do in your code? and, yes remember, the order in which you add the images also matters, so verify that screenshot has been pasted first – PranshuKhandal Jan 18 '19 at 18:06
1

i added that var WI = new Image(); WI.onload = function () { part before the Add button and it removed my button completly im confused on how to set the code up so it all works together – Jan 18 '19 at 18:07
1

See on the players theres a cam icon when clicked it creates a screenshot i want the watermark on that screenshot i updated my question with the Full code could you show me where to plug in the codes you provided above in the correct spot for it to work? – Jan 18 '19 at 18:08
but the most important part is, that your watermark should be loaded before putting it on to your canvas, as explained by @Thomas in https://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas – PranshuKhandal Jan 18 '19 at 18:10
1

so where in my code would i need to put that for that to happen? – Jan 18 '19 at 18:12
i have edited my reply with the new saveScreenShot function with the change. i hope it works – PranshuKhandal Jan 18 '19 at 18:17
1

THanks so much! I see where you changed the var where would i plug in my watermark.png? – Jan 18 '19 at 18:20
you should put your image just in the beginning of script tag, so that it becomes a global variable – PranshuKhandal Jan 18 '19 at 18:25
the WI = new Image(); WI.onload = function () { part should be kept out of the function – PranshuKhandal Jan 18 '19 at 18:29
1

can you take my full code and edit the whole thing? ill pay you even lol i just need it working :P and im clueless – Jan 18 '19 at 18:31
1

Thanks man works :) will you remove my jwplayer.key = from the code in your answer now so others cant jack it i pay $300/year for that key lol and will be banned if it gets out – Jan 18 '19 at 18:58

score 0 · Accepted Answer · edited Jan 18 '19 at 19:02

try this

<script src='https://content.jwplatform.com/libraries/i511f6Xb.js'></script>
<script type="text/javascript">
            // jwplayer.key="";
            jwplayer.key = '';</script><div id="video">
        </div>
        <script type="text/javascript">
            jwplayer('video').setup({
     skin: {
      "name": "glow",
      },
logo: {
      "file": "",
      "position": "top-right",
      "hide": "false",
    },


                'file': "m3u8",
                'title': '',
                'aspectratio': '16:9',
                s
                'width': '618px',

            });


        </script>

<script>
var WI = new Image();
WI.src = "path/to/your/watermark";

jwpwqwqlayer().addBuwqwqwtton(
                            "hg",
                            "Capture",
                            function() {
                              saveScreenShot("video");
                            },
                            "capture"
                        );
function saveScreenShot(Z) {
var H = document.getElementById(jwplayer(Z).id);
var B = (H) ? H.querySelector("video") : undefined;
if (B) {
//jwplayer().pause(!0);
var F = 1;

Dwidth = window.innerWidth
}
var C = document.createElement("div");
var E = "position: fixed;z-index: 9999999999999;width:" + Dwidth + "px; left: " + L + ";top:0;margin-top:60px";
E += ";padding-bottom:10px; background: #fff;border-radius:5px;";
E += "text-align: center;";
C.setAttribute("style", "display: block;");
C.appendChild(D);
G.setAttribute("id", "popupSave");
G.setAttribute("style", E);
var J = document.createElement("span");

I.onclick = function() {
document.getElementById("popupSave").remove()
};
G.appendChild(J);
G.appendChild(C);

//jwpqwqwlayer().psdsay()
}
}


</script>
</div>

here i have omitted the onload part, so for this version wait for the image to load completely, and then take the screenshot (by the way waiting by an idea only) — PranshuKhandal, Jan 18 '19 at 18:38
i hope i have not made any mistake while editting the code and that this works — PranshuKhandal, Jan 18 '19 at 18:48
Thanks man works :) will you remove my jwplayer.key = from the code in your answer now so others cant jack it i pay $300/year for that key lol and will be banned if it gets out — , Jan 18 '19 at 19:00

GTIcontrol · Answer 3 · 2021-05-27T12:03:31.437

Below the solution that is working today. For JWplayer 8 and others.

//name player div...
var playerInstance = jwplayer("player");

//Set start logo...
playerInstance.setup({
    file: '//gticontrol.com/video.m3u8',
    repeat: true,
    autostart: shouldAutostart,
        "logo": {
        "file": "https://gticontrol.com/br_tnt_m.png",
        "hide": "true",
        "position": "top-left"
        }             
});

//Creat function to change logo
function changeLogo(playerId, logoUrl){
    var logoElem = document.querySelector('#'+playerId + ' .jw-logo');
    logoElem.style.backgroundImage='url('+logoUrl+')';
};

//Call If need change logo...
changeLogo(playerInstance.id, 'https://gticontrol.com/mx_hbo-2_m.png');

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. — Tyler2P, May 26 '21 at 15:04

Added watermark to the page

3 Answers3