video用法

1、视频禁止下载

controlslist="nodownload"

<video preload src="a.mp4" controls controlslist="nodownload"></video>

https://blog.csdn.net/p793049488/article/details/81170454

2、视频播放图标居中，点击播放

video标签上面覆盖播放图标点击播放

• html

                            <div class="video_box">
                                <video preload id="video" src="a.mp4" controls controlslist="nodownload"></video>
                                <div class="video_img">
                                    <span>
                                        <i class="el-icon-caret-right"></i> // （elementUI图标）
                                    </span>
                                </div>
                            </div>

• css

       .video_box {
            width: 100%;
            position: relative;
        }
        
        .video_box video {
            width: 100%;
        }
        
        .video_box .video_img {
            width: 100%;
            height: 100%;
            text-align: center;
            cursor: pointer;
            font-size: 50px;
            color: #fff;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            line-height: 100%;
        }
        
        .video_img span {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            background-color: #606266;
            color: #fff;
            margin: 0 auto;
            /*水平居中*/
            position: relative;
            top: 50%;
            /*偏移*/
            transform: translateY(-50%);
            border-radius: 50%;
            text-align: center;
        }

• js

<script type="text/javascript">
    $(".video_img").click(function(){
        $(this).hide();
        $("#video")[0].play();
    })
</script>

https://blog.csdn.net/qq_43209114/article/details/100655330

3、页面有多个视频，一个视频播放时，其他视频暂停且播放时间归零

    var videoobjs = document.getElementsByTagName('video');
    //var videoobjs = $('video'); //jquery获取标签
    var videoobjlength = videoobjs.length;
    if(videoobjlength >0 ){
        for(let i=0;i<videoobjlength;i++){
            videoobjs[i].addEventListener('play',function(){
                for(let j=0;j<videoobjlength;j++){
                    if(i!=j && videoobjs[j].currentTime > 0){ // videoobjs[j].currentTime > 0 判断正在播放的视频
                        videoobjs[j].pause();
                        videoobjs[j].currentTime = 0
                    }
                }
            })
        }
    }

https://blog.csdn.net/s_turnTurn/article/details/106917572