视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

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

时间:2017-05-02 10:302cto.com
在过去，我们如果想在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. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset=utf-8> 
  4. <title>酷播HTML5视频教程-视频播放功能</title> 
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
  6. </script> 
  7. <script> 
  8. $(document).ready(function(){   
  9.     var video = $('#myvideo'); 
  10.        
  11.     $("#play").click(function(){  video[0].play();  }); 
  12.     $("#pause").click(function(){ video[0].pause(); }); 
  13.     $("#go10").click(function(){  video[0].currentTime+=10;  }); 
  14.     $("#back10").click(function(){  video[0].currentTime-=10;  }); 
  15.     $("#rate1").click(function(){  video[0].playbackRate+=2;  }); 
  16.     $("#rate0").click(function(){  video[0].playbackRate-=2;  }); 
  17.     $("#volume1").click(function(){  video[0].volume+=0.1;  }); 
  18.     $("#volume0").click(function(){  video[0].volume-=0.1;  }); 
  19.     $("#muted1").click(function(){  video[0].muted=true;  }); 
  20.     $("#muted0").click(function(){  video[0].muted=false;  }); 
  21.     $("#full").click(function(){  
  22.       video[0].webkitEnterFullscreen(); // webkit类型的浏览器 
  23.       video[0].mozRequestFullScreen();  // FireFox浏览器 
  24.     }); 
  25. }); 
  26.    
  27. </script> 
  28. </head> 
  29. <video id="myvideo" width="400"> 
  30.     <source src="iceage4.mp4" type="video/mp4" /> 
  31.     <source src="iceage4.webm" type="video/webM" /> 
  32.     <source src="iceage4.ogv" type="video/ogg" /> 
  33.         你的浏览器不支持html5 
  34. </video> 
  35. <hr> 
  36. <button id="play">播放</button> 
  37. <button id="pause">暂停</button> 
  38. <button id="go10">快进10秒</button> 
  39. <button id="back10">快退10秒</button> 
  40. <button id="rate1">播放速度+</button> 
  41. <button id="rate0">播放速度-</button> 
  42. <button id="volume1">声音+</button> 
  43. <button id="volume0">声音-</button> 
  44. <button id="muted1">静音</button> 
  45. <button id="muted0">解除静音</button> 
  46. <button id="full">全屏</button> 
  47. </body> 
  48.    
  49. </body> 
  50. </html>  

效果

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

热门文章推荐

请稍候...

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

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