自定义视频

最新推荐文章于 2019-06-12 20:55:59 发布

原创最新推荐文章于 2019-06-12 20:55:59 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

本文介绍了一个简单的HTML5视频播放器控制实现方案，包括播放、暂停、快进、后退等功能，并通过JavaScript实现了基本的交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="播放" onclick="play()"/>
<input type="button" value="快进" onclick="forward()"/>
<input type="button" value="后退" onclick="back()"/>
<input type="button" value="放大" onclick="max1()"/>
<input type="button" value="缩小" onclick="min1()"/>
<input type="button" value="暂停" onclick="stop()"/>
<input type="button" value="正常" />
<input type="button" value="重新播放" onclick="reload()"/>
<label for="clear">静音</label>
<input type="checkbox" id="clear" onclick="muted()"/>
<label for="continue">单曲循环</label>
<input type="checkbox" id="continue" /><br />
<video id="movie">
<source src="http://k.youku.com/player/getFlvPath/sid/050833917821212ad324e/st/mp4/fileid/030012010059DC6C28E56731566005E83299E4-73D3-CA95-FEEE-D90B0EBF53B0?k=e018fddc70da946a24132df5&hd=1&myp=0&ts=186&ctype=12&ev=1&token=0514&oip=1875171271&ep=cieUEkqOX88H7SHeij8bNnjhdnNaXP4J9h%2BEg9JjALshQZzMn03Tz%2Bi1SPhBF%2FwfdCIGFZ75qNLu%0AYzUQYfdA3WsQrD%2BhPPqWi4WW5dlaxOIAE2tAd86ltFSeRjH1&ccode=0512&duration=185&expire=18000&psid=b8065db1b9f4d1368b2e140ed48b13cc&ups_client_netip=111.196.215.199&ups_ts=1508339178&ups_userid=1163849232&utid=0bQEEqoBwGQCAW%2FB%2BtcZW64H&vid=XMzA3NjE4OTQ0OA%3D%3D&vkey=Abf9ed31352577485e0120a09df7edc0a"></source>
<source src="big_buck_bunny.ogv"></source>
<source src="big_buck_bunny.webm.crdownload"></source>
当前视频无法正常播放，您去下载一个吧<a href="#"></a>
<object data="player_yknpsv.swf" type="application/x-shockwave-flash">
<param name="movie" value="player_yknpsv.swf" />
</object>
</video>
<script>
var movie=document.getElementById("movie");
function play(){
movie.play();
}
function forward(){
movie.currentTime +=10;
}
function back(){
movie.currentTime -=10;
}
function max1(){
movie.style.width="1000px";
// movie.style.height="1000px";
}
function min1(){
movie.style.width="100px";
}
function stop(){
movie.pause();
}
function reload(){
movie.load();
movie.play();
}
function muted(){
movie.muted=document.getElementById("clear").checked;
}
</script>
</body>
</html>