HTML5 新标签和属性（video）

最新推荐文章于 2024-03-14 03:24:36 发布

Awen_liang1002

最新推荐文章于 2024-03-14 03:24:36 发布

阅读量2k

点赞数

分类专栏： HTML5 文章标签： html5 标签视频

本文链接：https://blog.csdn.net/weixin_37615202/article/details/75072900

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为我的这个播放器是要插入文档的，所以制作比较简单，并没有使用controls，暂停pause和播放play按钮包括poster都是自定义，其实还可以加上一些音量、进度条、播放时长、全屏等功能，大家可以去看一下文档自己再基础上修改

话不多说，直接贴上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频播放器</title>
</head>
<body>
   <div class="content" style="width:375px; height:187px;text-align:center;position:relative">
      <p><a href="">我就是想播放一下视频行不行</a></p>
      <div id="video1_mask" style="width:375px; height:187px;text-align:center;position:relative">
          <video id="video1" style="width:375px; height:187px;" x-webkit-airplay="true" webkit-playsinline="true">  
              <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />  
              <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
              你的浏览器不支持html5的video标签 
          </video>
          <div id="video1_poster" style="width: 375px;height: 187px;position: absolute;top: 0;left: 0;background:url(http://img5.imgtn.bdimg.com/it/u=289171056,411623897&fm=26&gp=0.jpg) 100% 100%;display:block;"></div>
          <div id="video1_btn" style="position: absolute;width: 50px;height: 50px;background-color: red;top: 50%;left: 50%;margin:-25px 0 0 -25px;display:block;border-radius:50%;"></div>
      </div>
    </div>
</body>
</html>
<script type="text/javascript">
  var video1=document.getElementById("video1");
  var video1_poster=document.getElementById("video1_poster");
  var video1_btn=document.getElementById("video1_btn");
  var video1_mask=document.getElementById("video1_mask");

  video1_btn.addEventListener('click',clickBtn,false);
  function clickBtn(){
    if(video1.paused){
      video1_poster.style.display="none";
      video1_btn.style.display="block";
      video1_btn.style.backgroundColor="green";
      video1.play();
    }else{
      video1_btn.style.display="block";
      video1_btn.style.backgroundColor="red";
      video1.pause();
    };
  };
  video1.addEventListener('ended', endedPlay, false);
  function endedPlay(){
      video1.load();
      video1_poster.style.display="block";
      video1_btn.style.display="block";
      video1_btn.style.backgroundColor="red";
  };
  video1_mask.addEventListener('click',function(){   
      video1_btn.style.display="block";
      setTimeout( function (){
        video1_btn.style.display="none";
      },1500); 
      console.log("c");
  },false);
</script>

封面效果如图

播放中、播放、暂停图

为什么使用这个呢？为了就是阻止事件冒泡，我的事件是这样的当开始播放时，点击屏幕先出现暂停播放按钮再点击一下实现暂停播放功能，至于为什么不用mouseover和mouseout呢，因为移动端不支持啊，所以只能用这个方法；

addEventListener('事件', 函数名, false）

Awen_liang1002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新标签和属性（video）

因为我的这个播放器是要插入文档的，所以制作比较简单，并没有使用controls，暂停pause和播放play按钮包括poster都是自定义，其实还可以加上一些音量、进度条、播放时长、全屏等功能，大家可以去看一下文档自己再基础上修改话不多说，直接贴上代码视频播放器我就是想播放一下视频行不行
复制链接

扫一扫