对video标签设置不自动播放隐藏下载功能禁止右键另存为视频的操作

在video标签上添加了属性 autoplay=“autoplay” loop=“loop”,然而通过地址栏进去的时候,视频并没有自动播放,
    找资料发现,添加 muted 属性,就可以通过地址栏进入网页的时候自动播放了。

  

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

h5 video标签屏蔽下载按钮和取消右键菜单


    取消下载按钮
        video 标签中添加controlslist="nodownload"(video完成渲染之前)

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

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


    video标签:
    <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的方式为隐藏下载功能标签添加属性  

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

    3.为video添加禁止右键另存为操作       

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

去掉video标签自带的下载按钮 【有待测试

    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>

 

 

Logo

一站式 AI 云服务平台

更多推荐