HTML5 新标签和属性（video）

来源：互联网发布：淘宝借贷延期编辑：程序博客网时间：2024/05/11 22:55

因为我的这个播放器是要插入文档的，所以制作比较简单，并没有使用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）

阅读全文

0 0