[天友网]手写jquery制作列表视频弹窗播放

首先在页面上放一个视频列表版块

下面放置视频弹窗DIV，弹窗DIV默认隐藏，当点击列表视频时播放，再次点击页面关闭视频并停止播放，点击切换其他视频自动从0开始播放。

实现原理剖析：

1、给列表里的video添加data-src存放视频地址

2、添加一个视频弹窗DIV，设置样式

3、jquery点击事件，自动获取列表里的视频链接并赋值到弹窗DIV里

4、jquery成功获取，点击视频后的黑色透明蒙版自动关闭并停止视频播放

5、再次点击，视频从0开始重新播放

步骤：

首先在页面上放一个视频列表版块

<div class="index-video">
  <div class="container">
    <ul class="row">
      <li class="col-xs-6 play">
        <video src="/web/video/demo1.mp4" preload="auto" class="video-src" data-src="/web/video/demo1.mp4"></video>
      </li>
      <li class="col-xs-6 play">
        <video src="/web/video/demo2.mp4" preload="auto" class="video-src" data-src="/web/video/demo2.mp4"></video>
      </li>
      <li class="col-xs-6 play">
        <video src="/web/video/demo1.mp4" preload="auto" class="video-src" data-src="/web/video/demo1.mp4"></video>
      </li>
      <li class="col-xs-6 play">
        <video src="/web/video/demo2.mp4" preload="auto" class="video-src" data-src="/web/video/demo2.mp4"></video>
      </li>
    </ul>
  </div>
</div>

<div class="video-box">
  <video id="video" src="/" controls>
    您的浏览器不支持 video 标签。
  </video>
</div>

然后添加css样式

.video-box {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 999;
  padding: 0 20px;
}
.video-box video {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50%;
  margin-top: -100px;
  width: 100%;
  max-width: 100%;
  height: 200px;
}

给列表视频添加点击事件和视频播放停止控制的API

此处的视频地址获取来自列表里的data-src里的视频地址

<script>
// 视频弹窗播放
$(function(){
  $(".play").click(function(){
    //此处写点击触发的操作
    $(".video-box").show();
    var src1 = $(this).children(".video-src").data("src");
    $(".video-box video").attr("src",src1);;
    //1、取得播放器的对象
    var video=$('#video').get(0);
    //2、调用视频播放API
    video.play();
    //视频停止API
    //objVideo.pause();
  });

  $(".video-box").click(function(){
    video.pause();
    $(this).css("display","none");
  });
  $(".video-box video").click(function(){
    return false;
  });
});
</script>