在video標(biāo)簽上添加了屬性 autoplay=“autoplay” loop=“l(fā)oop”,然而通過地址欄進(jìn)去的時候，視頻并沒有自動播放，

找資料發(fā)現(xiàn)，添加 muted 屬性，就可以通過地址欄進(jìn)入網(wǎng)頁的時候自動播放了。

<video id="video" src="xxxx/xxx.mp4" autoplay="autoplay" loop="loop" muted="muted" height="100%" width="100%"></video>

h5 video標(biāo)簽屏蔽下載按鈕和取消右鍵菜單

取消下載按鈕

video 標(biāo)簽中添加controlslist="nodownload"(video完成渲染之前)

<video src="" controls="controls" controlslist="nodownload"></video>

取消右鍵菜單

<script>
    $("#video").bind("contextmenu",function(){//取消右鍵事件
    return false;
    });
</script>

video標(biāo)簽：

<video controls>

<video controls controlsList="nofullscreen">

<video controls controlsList="nodownload">

<video controls controlsList="noremoteplayback">

<video controls controlsList="nodownload nofullscreen noremoteplayback">

<video controlsList="nodownload nofullscreen noremoteplayback">

2.也可以通過jquery的方式為隱藏下載功能標(biāo)簽添加屬性  

   $('#video').attr('controlslist',"nodownload");

3.為video添加禁止右鍵另存為操作       

$('#video').bind('contextmenu',function() { return false; });

去掉video標(biāo)簽自帶的下載按鈕 【有待測試】

    video::-internal-media-controls-download-button {
      display:none;
    }
    video::-webkit-media-controls-enclosure {
      overflow:hidden;
    }
    video::-webkit-media-controls-panel {
      width: calc(100% + 30px);
    }
 
<style type="text/css">
    video::-webkit-media-controls-enclosure {
        overflow:hidden;
    }
    video::-webkit-media-controls-panel {
        width: calc(100% + 30px);
    }
</style>

掃描二維碼手機(jī)查看該文章