编程代码

如何将logo添加到 plyr 播放器

gyue2345·2022-09-18·14 次阅读··

   评分 0 次,平均分 0.0    抢沙发   隐藏边栏   黑色模式
[收起] 文章目录

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
关联文章

plyr player rotate screen when fullscreen in mobile.(H5播放器在移动设备中全屏时旋转屏幕)

// fullscreen enter on mobile device player.on('enterfullscreen', event => { try { screen.orientatio...

赞赏
  

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2022/09/how-to-add-logo-to-plyr-player/

博 主作者: 关注:6    粉丝:1最后编辑于:2022年9月18日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL