视频video属性
image.png
image.png
image.png
可以通过control属性打开播放控件，或者如下自定义播放控件：
- 自定义包括 播放：
play - 暂停：
pause - 音量调节：
volumn - 播放速度:
playbackRate - 控制全屏以及退出全屏:
webkitRequestFullScreen
<video width="320" height="240" controls> // controls 控制播放控件，或者如下 自定义播放控件
<source :src="item.file.url" >
</video>
var oVideo = document.getElementById('video');
var aspan = document.querySelectorAll('span');
var onOff = true;
for (var i = 0; i< aspan.length; i++ ) {
aspan[i].index = i;
aspan[i].onclick = function() {
switch (this.index) {
case 0:
oVideo.play(); // 播放
break;
case 1:
oVideo.pause(); // 暂停播放
break;
case 2:
oVideo.volumn +=0.05; // 音量+
break;
case 3:
oVideo.volumn-=0.05;// 音量-
break;
case 4:
oVideo.volumn = 0;// 静音
break;
case 5:
onOff ? (oVideo.playbackRate += 10) : (onVideo.playbackRate = 1); // 播放速度
onOff = !onOff;
break;
case 6:
oVide.webkitRequestFullScreen(); // 全屏
break;
default:
break;
}
}
}
音频audio
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul {
width: 700px;
height: 40px;
border: 1px solid;
display: flex;
margin: 80px auto;
}
ul li{
list-style: none;
flex:1;
border-right: 1px solid;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<audio id="audio"></audio>
<script>
var ali = document.querySelectorAll('li');
var audio = document.querySelector('#audio');
for (var i = 0; i< ali.length; i++) {
ali[i].style.background = randomC();
ali[i].index = i;
ali[i].onmouseenter = function () { // 鼠标移入触发事件
this.style.background = randomC();
audio.src = 'mp3/' + (this.index+1) + '.mp3';
audio.play();
}
}
function randomC(params) {
var r = Math.floor(Math.random() * 120 + 120);
var g = Math.floor(Math.random() * 120 + 120);
var b = Math.floor(Math.random() * 120 + 120);
return 'rgb(' + r + ',' + g + ',' + b + ')'
}
</script>
</body>
</html>
网友评论