·您当前的位置:主页 > 技术教程 > Html5技术 >

HTML5视频播放器自定义样式控制播放代码示例

时间:2018-11-22 10:22csdn.net
HTML5视频播放器自定义样式控制播放代码示例

HTML5视频播放器自定义样式控制播放代码示例

  1.   
  2. <div id="video_div" style="text-align:center;">  
  3. <button onclick="playPause()">播放/暂停</button>  
  4. <button onclick="toBig()"></button>  
  5. <button onclick="toNormal()"></button>  
  6. <button onclick="toSmall()"></button>  
  7. <video id="myVideo" width="500" height="250" style="margin-top:15px;">  
  8. <source src="demo.mp4" type="video/mp4" />  
  9. <source src="demo.ogg" type="video/ogg" />  
  10. 您的浏览器不支持此HTML5 视频标签。  
  11. </video>  
  12. </div>  

 

  1. <script type="text/javascript">  
  2. var myVideo=document.getElementById("myVideo");  
  3. function playPause()  
  4. {  
  5. if (myVideo.paused)  
  6. myVideo.play();  
  7. else  
  8. myVideo.pause();  
  9. }  
  10. function toBig()  
  11. {  
  12. myVideo.width=560;  
  13. }  
  14. function toNormal()  
  15. {  
  16. myVideo.width=420;  
  17. }  
  18. function toSmall()  
  19. {  
  20. myVideo.width=320;  
  21. }  
  22. </script>  

 

热门文章推荐

请稍候...