[H5]<video>自定义实现点击的时候暂停与播放

如图所示：需要实现的自定义效果是点击视频上的图标或者视频的时候实现暂停与播放
思路整理：
1.需要将图片定位到视频上
2.点击视频的时候，暂停图片显示，播放的时候图标隐藏
3.点击图片的时候，和第二步操作一致

字数省略1.png

HTML 注：由于我是写在react项目中，所以src的链接都是用require模块获取的，如果不是写在react项目中的话直接写路径就可以

 <div style={{ position: "relative"}}>
          //视频中心的暂停按钮图片
          <img
            id="videoPalse"
            src={[require("./../../assets/laterImg/index_icon_bofang@2x.png")]}
            alt=""
          /> 
          <video
            id="videoplay"
            poster={[require("./../../assets/laterImg/index_img_01@3x.png")]}
            src={[require("./../../assets/laterImg/westlake.mp4")]}
            type="video/mp4"
            playsInline={ true }   // 小屏播放
            webkit-playsinline="true"  // ios系统下小屏播放
            width="1" 
            height="1"
          />
</div>

css

video{
    width:100%;
    height:100%;
    object-fit:fill;
    border-radius: 5px;
}
/**视频中心暂停图片的样式**/
#videoPalse{
    position: absolute;
    z-index: 100;
    width:50px;
    top:25%;
    left:42%;
}

js

 //点击屏幕的时候暂停，并且图片隐藏，再次点击视频或者图片的时候播放
    let videoplay = document.getElementById("videoplay");
    if (videoplay) {
 //点击图片的时候暂停，并且使图片隐藏，再次点击视频或者图片的时候播放
      videoplay.onclick = function() {
        if (videoplay.paused) {
          videoplay.play();
          videoPalse.style.display = "none";   //播放的时候图标隐藏
        } else {
          videoplay.pause();
          videoPalse.style.display = "block";   //暂停的时候图标显示
        }
      };
    //对于ios系统播放完毕之后变黑的情况,在播放结束的时候所以要重新刷新一下src
    if(isiOS){
    //isiOS是我设置的变量判断ios系统的常量，如果需要判断条件可以评论或者私信我
      videoplay.addEventListener('ended', function (e) {
        // 播放结束时触发的时候使播放图标显示，同时播放完之后重新加载video的src
            videoPalse.style.display = "block"; 
            videoplay.src=require("./../../assets/laterImg/westlake.mp4");
            })
    }
     
    }
   //同样点击图标的时候也需要播放暂停，下面是对图标的处理
    let videoPalse = document.getElementById("videoPalse");    //video标签
    if (videoPalse) {
      videoPalse.onclick = function() {
        if (videoplay.paused) {     //点击视频的时候如果暂停状态，则让其播放
          videoplay.play();
          videoPalse.style.display = "none";
        } else {
          videoplay.pause();
          videoPalse.style.display = "block";
        }
      };
    }

注意：<video>标签播放的视频在不同的浏览器和手机中展示不同，对于谷歌浏览器手机模拟模式中上面的控制事件会生效，如果放在手机上：安卓系统小屏幕播放，播放的时候会显示controls控件层，自定义图标显示隐藏js不生效。对于ios系统，播放视频默认会大屏幕播放，自定义的图标显示隐藏的js控制同样不生效了，对于ios系统，处理禁止大屏幕播放事件之后图标的自定义控制就会生效，关于怎么禁止ios视频大屏幕播放事件会在我的下面文章中会进一步写