Question

水印添加

添加水印

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()
    }
    }

感谢大家的帮助:)非常感谢，我找到了一种使它工作的方法！

Answer 1

要添加水印，首先应在页面上加载该水印图像。并且所有代码都应在此之后运行。

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

其次，您应该将canvas的2d上下文存储在一个变量中，以便可以重复使用。并将代码更改为此。

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);

这应该符合您的要求。

编辑：这里“ WI”是已经加载的水印图像

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()
}
}

Answer 2

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>

Answer 3

在今天有效的解决方案下方。适用于 JWplayer 8 等。

//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');

在页面上添加了水印

3 个答案: