<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
.video-div{
width:500px;
height:600px;
margin:0 auto;
}
#video{
width:500px;
height:600px;
}
#video_val{
width:500px;
}
#video-btn{
margin-top:10px;
margin-right:10px;
}
.video-div button{
cursor:pointer;
}
</style>
</head>
<body>
<div class="video-div">
<video id="video" controls src="" type="video/mp4"></video>
<p>选择播放速率:
<select id="selRate">
<option value="0.5">0.5</option>
<option value="1" selected>1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="2">2.0</option>
</select>
</p>
<span>输入视频链接:</span>
<input type="text" name="" value="" id="video_val" />
<br />
<button οnclick="videoBtn()" id="video-btn">点击播放</button>
<button οnclick="videoClear()">清空链接</button>
</div>
<script type="text/javascript">
var eleSelect = document.getElementById('selRate');
// 酷播提示:视频元素
var video = document.getElementById('video');
// 改变播放速率
eleSelect.addEventListener('change', function () {
video.playbackRate = this.value;
});
function videoBtn(){
var video_val = $('#video_val').val();
if(video_val){
$('#video').attr('src',video_val);
eleSelect.value = '1'
video.playbackRate = '1';
video.play();
}
}
function videoClear(){
$('#video_val').val('');
}
</script>
</body>
</html>
html5视频标签video视频倍速播放的实现
最新推荐文章于 2024-07-31 09:18:16 发布