视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]HTML5视频播放事件属性与API控件

时间:2017-10-12 14:37酷播
[html5]HTML5视频播放事件属性与API控件

[html5]HTML5视频播放事件属性与API控件

  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>    

 来源 blog.csdn.net/take_dream_as_horse/article/details/53422397

热门文章推荐

请稍候...

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

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