H5视频和背景音乐
Posted jiangquhan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5视频和背景音乐相关的知识，希望对你有一定的参考价值。
H5里的视频和背景音乐
<video></video> 视频标签 属性src
play() 开始播放
pause() 暂停播放
autoplay:自动播放 注意这里被浏览器禁用了除静音才能会自动播放 这里我去查了一下浏览器的解释， 浏览器的意思是怕突然很大声吓到人或者制造噪音
muted 设置静音
controls 默认控件浏览器每个浏览器的控件样式都不一样
loop 是否循环播放
poster 视频播放前的预览图片 谷歌中一闪而过 广告
ended 是否播放到结束
paused 当前是否处于暂停状态
currentTime 播放到的当前时间
duration 影片的总时长
下面写给小案例来运用以上属性
<body>
<div class="div1">
<video src="1.mp4" class="dy"></video>
<img src="img/1.jpg" class="img2">
<div class="div5">
<img class="img1" src="img/play02.png">
<div class="bar">
<div class="circle"></div>
<button class="nam">全屏</button >
</div>
</div>
</div>
<script>
var dy = document.getElementsByClassName("dy")[0];
var img1 = document.getElementsByClassName("img1")[0];
var img2 = document.getElementsByClassName("img2")[0];
var div1 = document.getElementsByClassName("div1")[0];
var div5 = document.getElementsByClassName("div5")[0];
var circle = document.getElementsByClassName("circle")[0];
var bar = document.getElementsByClassName("bar")[0];
var nam = document.getElementsByClassName("nam")[0];
//自己写的进度条
setInterval(function fun() {
var a = parseFloat(dy.currentTime / dy.duration);
circle.style.width = (a * 100) + "%";
}, 100);
nam.onclick = function(){
// 是否全屏
if (dy.requestFullscreen) {
dy.requestFullscreen();
}
};
img1.onclick = function() {
//当前是否属于暂停状态
if (dy.paused) {
dy.play();
img1.src = "img/play02.png"
img2.style.display = "none"
} else {
dy.pause()
img1.src = "img/pause02.png"
img2.style.display = "block"
}
}
dy.onclick = function() {
//当前是否属于暂停状态
if (dy.paused) {
img1.style.display = "block";
img1.src = "img/play02.png"
img2.style.display = "none"
dy.play();
} else {
img1.src = "img/pause02.png"
img2.style.display = "block"
dy.pause();
}
}
div1.onmouseout = function() {
div5.style.display = "none";
}
div1.onmouseover = function() {
div5.style.display = "block"
}
</script>
</body>
背景音乐
<audio></audio> 音乐标签 属性src
背景音乐和视频一样只是标签不同用法都一样
下面也写给小案例来用以上学习的属性
<body>
时长
<div class="yi">
<div class="div">
<span class="tuo"></span>
</div>
<audio class="num" src="1.mp3"></audio> 播放/暂停
<input class="play" type="checkbox"> 上一曲 <input class="Last " type="checkbox"> 下一曲 <input class="lower" type="checkbox">
</div>
<script>
var play = document.getElementsByClassName("play")[0];
var num = document.getElementsByClassName("num")[0];
var div = document.getElementsByClassName("div")[0];
var tuo = document.getElementsByClassName("tuo")[0];
//根据歌曲长度来设置
var b = num.duration;
div.style.width = b + "px"
//定时器
//进度条
setInterval(function fun() {
//将音乐总长度除播放的长度获取剩下的长度
// 用变量a来存储
var a = (num.currentTime / num.duration);
// 在用a改变播放进度的span width的值就是进度条的进度
tuo.style.width = (a * 100) + "%"
}, 100)
play.onclick = function() {
if (num.paused) {
num.play()
} else {
num.pause()
}
}
</script>
</body>
其实视频和背景音乐还是蛮简单的
试试就懂了没什么难度
以上是关于H5视频和背景音乐的主要内容，如果未能解决你的问题，请参考以下文章