视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5视频播放Video(视频)的范例源代码

时间:2016-12-11 22:01酷播
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等

[html5]html5视频播放的范例源代码

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>酷播html5教程(cuplayer.com)</title>  
  6. </head> 
  7. <body>  
  8.  
  9. <div style="text-align:center">  
  10.   <button onclick="playPause()">播放/暂停</button>  
  11.   <button onclick="makeBig()">放大</button> 
  12.   <button onclick="makeSmall()">缩小</button> 
  13.   <button onclick="makeNormal()">普通</button> 
  14.   <br>  
  15.   <video id="video1" width="420"> 
  16.     <source src="mov_bbb.mp4" type="video/mp4"> 
  17.     <source src="mov_bbb.ogg" type="video/ogg"> 
  18.     您的浏览器不支持 HTML5 video 标签。 
  19.   </video> 
  20. </div>  
  21.  
  22. <script>  
  23. var myVideo=document.getElementById("video1");  
  24.  
  25. function playPause() 
  26. {  
  27.     if (myVideo.paused)  
  28.       myVideo.play();  
  29.     else  
  30.       myVideo.pause();  
  31. }  
  32.  
  33.     function makeBig() 
  34. {  
  35.     myVideo.width=560;  
  36. }  
  37.  
  38.     function makeSmall() 
  39. {  
  40.     myVideo.width=320;  
  41. }  
  42.  
  43.     function makeNormal() 
  44. {  
  45.     myVideo.width=420;  
  46. }  
  47. </script>  
  48.  
  49. </body>  
  50. </html> 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器