如何将logo添加到 plyr 播放器

gyue2345·2020-08-18·85 次阅读··

https://github.com/sampotts/plyr
项目链接

添加logo

//add player logo
var plyrWrapper = document.querySelector(".plyr__video-wrapper");
var plyrLogo = document.createElement("div");
plyrLogo.setAttribute("id", "playerlogo");
plyrLogo.style = `
    	background-repeat: no-repeat;
    	background-image: url("/logo.png");
    	background-size: contain;
    	background-position: center;
    	position: absolute;
        top: 5%;
        right: 1%;
        width: 20%;
        height: auto;
        padding-bottom: 4%;
        z-index: auto;
        opacity: 0.5;
    `;
plyrWrapper.appendChild(plyrLogo);

隐藏logo

// hide player logo
player.on('playing', (event) => {
  setTimeout(function () {
    document.getElementById("playerlogo")
      .style = `display:none;`;
  }, 60000);
});

使用演示

https://movie.ljy2345.com/vodplay/41330-1-1.html
关联文章

历史上的文章

• 2015:  PHP、asp实现防止CC攻击和快速刷新网页( 0)
• 2015:  十分逼真的小水滴flash动画( 0)