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

最新推荐文章于 2024-06-12 15:33:32 发布

rugaxm

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量5.2k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/rugaxm/article/details/8668697

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>HTML5视频教程-视频播放功能</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){   
    var video = $('#myvideo');
     
    $("#play").click(function(){  video[0].play();  }); 
    $("#pause").click(function(){ video[0].pause(); });
    $("#go10").click(function(){  video[0].currentTime+=10;  });
    $("#back10").click(function(){  video[0].currentTime-=10;  });
    $("#rate1").click(function(){  video[0].playbackRate+=2;  });
    $("#rate0").click(function(){  video[0].playbackRate-=2;  });
    $("#volume1").click(function(){  video[0].volume+=0.1;  });
    $("#volume0").click(function(){  video[0].volume-=0.1;  });
    $("#muted1").click(function(){  video[0].muted=true;  });
    $("#muted0").click(function(){  video[0].muted=false;  });
    $("#full").click(function(){  
      video[0].webkitEnterFullscreen(); // webkit类型的浏览器
      video[0].mozRequestFullScreen();  // FireFox浏览器
    });
});
 
</script>
</head> 
<video id="myvideo" width="400">
    <source src="iceage4.mp4" type="video/mp4" />
    <source src="iceage4.webm" type="video/webM" />
    <source src="iceage4.ogv" type="video/ogg" />
        你的浏览器不支持html5
</video>
<hr>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度-</button>
<button id="volume1">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted0">解除静音</button>
<button id="full">全屏</button>
</body>
 
</body> 
</html>

rugaxm

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5 视频播放事件属性与API控件

HTML5视频教程-视频播放功能$(document).ready(function(){ var video = $('#myvideo'); $("#play").click(function(){ video[0].play(); }); $("#pause").click(function(){ video[0].pause(); }
复制链接

扫一扫