[HTML5]视频播放事件的源代码范例(视频类事件操

      2020-01-20 08:45      HTML5
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了

在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了
1、视频格式的简单介绍 视频格式:avi、rmb、wmv、mpeg4、ogg、webm 视频主要有三部分组成:视频、音频、编码格式 HTML5支持的格式: Ogg= 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4= 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2、HTML5视频标签<video>属性 <video src="movie.mp4" controls="controls"> </video> <video src="movie.mp4" controls="controls"> 浏览器不支持HTML5的视频播放功能 </video> <video width="300" controls="controls" …> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> </video>
3、HTML5视频API控件 获得video标签,这里是DOM对象 varvideo = document.getElementById('videoID'); 也可以通过jQuery的方法,如下: varvideo = $('#videoID').get(0); 载入视频:load() , 播放视频:play() , 暂停:pause() , 快进10秒:currentTime+=10 播放速度增加:playbackRate++ 播放速度增加0.1:playbackRate+=0.1 音量增加:volume+=0.1 静音:muted=true

4、示例

  1. <!DOCTYPEhtml><head>
  2. <metacharset=utf-8><title>HTML5视频教程-视频播放功能</title>
  3. <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4. <script>$(document).ready(function(){
  5. varvideo=$('#myvideo');
  6. $("#play").click(function(){video[0].play();});$("#pause").click(function(){video[0].pause();});
  7. $("#go10").click(function(){video[0].currentTime+=10;});$("#back10").click(function(){video[0].currentTime-=10;});
  8. $("#rate1").click(function(){video[0].playbackRate+=2;});$("#rate0").click(function(){video[0].playbackRate-=2;});
  9. $("#volume1").click(function(){video[0].volume+=0.1;});$("#volume0").click(function(){video[0].volume-=0.1;});
  10. $("#muted1").click(function(){video[0].muted=true;});$("#muted0").click(function(){video[0].muted=false;});
  11. $("#full").click(function(){video[0].webkitEnterFullscreen();//webkit类型的浏览器
  12. video[0].mozRequestFullScreen();//FireFox浏览器});
  13. });
  14. </script></head>
  15. <videoid="myvideo"width="400"><sourcesrc="iceage4.mp4"type="video/mp4"/>
  16. <sourcesrc="iceage4.webm"type="video/webM"/><sourcesrc="iceage4.ogv"type="video/ogg"/>
  17. 你的浏览器不支持html5</video>
  18. <hr><buttonid="play">播放</button>
  19. <buttonid="pause">暂停</button><buttonid="go10">快进10秒</button>
  20. <buttonid="back10">快退10秒</button><buttonid="rate1">播放速度+</button>
  21. <buttonid="rate0">播放速度-</button><buttonid="volume1">声音+</button>
  22. <buttonid="volume0">声音-</button><buttonid="muted1">静音</button>
  23. <buttonid="muted0">解除静音</button><buttonid="full">全屏</button>
  24. </body>
  25. </body></html>

效果

html5视频专栏:http://www.cuplayer.com/zt/html5/

    实现js控制HTML5音乐播放器的暂停与播放 html5的<video>标签定义及使用说明 html5视频播放器video标签src标签支持哪些格式 HTML5的preload属性用法提示说明 html5视频音频API说明 html5视频播放器控制视频的操作源代码范例 html5视频播放器中video和audio标签的使用说明附源代码 在html5下做音频Audio标签实现歌词同步效果的音乐播放器 html5音频播放Audio(音频)的范例源代码 html5视频播放Video(视频)的范例源代码 手机视频播放器适配最佳的免费播放器下载 html5视频标签/属性/方法/事件说明 html5音乐控制关闭开启源代码 html5视频处理Video的API 音量静音设置和音量属性设置或返回音频/视频的当前音量 手机微信音乐播放器(简洁美观型音乐播放器)