AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > 网页制作

html5 Video控件视频播放，电脑和手机上都能兼容。（mp4格式 电脑和android、ios都能播放）
51自学网 http://www.51zixue.net

 

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/html">  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.   
  7. </head>  
  8. <body>  
  9.   
  10. <video id="video" width="500" height="500" controls>  
  11.     <source src="movie.mp4" type="video/mp4">  
  12.     <source src="movie.mp4" type="video/ogg">  
  13.     您的浏览器不支持 HTML5 video 标签。  
  14. </video>  
  15. </br></br>  
  16. <button onclick="playPause(this)">播放</button>  
  17. <button onclick="forward()">快进5秒</button>  
  18. <button onclick="rewind()">快退5秒</button>  
  19. <button onclick="mute(this)">静音</button>  
  20. <button onclick="accelerate()">加速3倍播放</button>  
  21. <button onclick="decelerate()">减速3倍播放</button>  
  22. <button onclick="normal()">正常播放</button>  
  23. <button onclick="upperVolume()">提高声音</button>  
  24. <button onclick="lowerVolume()">降低声音</button>  
  25.   
  26. <script type="text/javascript">  
  27.     var video = document.getElementById('video');  
  28.   
  29.     function playPause(obj) {  
  30.         if (video.paused) {  
  31.             video.play();  
  32.             obj.innerHTML = "暂停";  
  33.         } else {  
  34.             video.pause();  
  35.             obj.innerHTML = "播放";  
  36.         }  
  37.   
  38.     }  
  39.   
  40.     function forward() {  
  41.         video.currentTime += 5;  
  42.     }  
  43.   
  44.     function rewind() {  
  45.         video.currentTime -= 5;  
  46.     }  
  47.   
  48.     function mute(obj) {  
  49.         if (video.muted) {  
  50.             video.muted = false;  
  51.             obj.innerHTML = "静音";  
  52.         } else {  
  53.             video.muted = true;  
  54.             obj.innerHTML = "开声";  
  55.         }  
  56.   
  57.     }  
  58.   
  59.     function accelerate() {  
  60.         video.playbackRate = 3;  
  61.     }  
  62.   
  63.     function decelerate() {  
  64.         video.playbackRate = 1 / 3;  
  65.     }  
  66.   
  67.     function normal() {  
  68.         video.playbackRate = 1;  
  69.     }  
  70.   
  71.     function upperVolume() {  
  72.         video.volume += 0.2;  
  73.     }  
  74.   
  75.     function lowerVolume() {  
  76.         video.volume -= 0.2;  
  77.     }  
  78. </script>  
  79. </body>  
  80. </html>  

　

上一篇：2016如何屏蔽优酷广告的方法 网页调用无广告视频代码  下一篇：一老板用600万买了穷人媳妇, 5年后知道真相的穷人泪流满面
　
CAD教程 教师招聘 招聘信息 　 　 　
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.51zixue.net网站地图