video實(shí)現(xiàn)自動(dòng)播放有聲音
需求:老板見人家可以的,我們的也要可以?。?!
前端:自動(dòng)播放,簡(jiǎn)單...
要實(shí)現(xiàn):鼠標(biāo)移入視頻播放同時(shí)有聲音,移出讓你暫停,,,,,
問題集合
1- 自動(dòng)播放實(shí)現(xiàn)沒有聲音,
2- 怎么實(shí)現(xiàn)有聲音自動(dòng)播放?
3- 鼠標(biāo)移入移出實(shí)現(xiàn)...
解決
1——了解故事背景:
因?yàn)樵?jīng)某些“邪惡”的前輩們,在頁(yè)面中展示了很多類似
是兄弟就一起來-----我是(⊙_⊙)輝???
動(dòng)感的畫面,有趣的話語(yǔ),曾經(jīng)也被吸引住了,只是那個(gè)聲音.....
簡(jiǎn)而言之————廠商認(rèn)為用戶體驗(yàn)不好,禁了聲音
2—— 相關(guān)資料、實(shí)現(xiàn):
其實(shí),也可以實(shí)現(xiàn)自動(dòng)播放時(shí)聲音也播放
在體驗(yàn)差的同時(shí),廠商為了照顧開發(fā)者,允許用戶交互之后實(shí)現(xiàn)播放,例如點(diǎn)擊等操作(神馬鬼意思?)
即兩種選擇:
1—— 視頻實(shí)現(xiàn)自動(dòng)播放,但是要靜音,在標(biāo)簽中添加muted屬性,就能實(shí)現(xiàn)自動(dòng)播放
2—— 視頻實(shí)現(xiàn)自動(dòng)播放,有聲音,這個(gè)要在文檔與用戶之間有操作之后才能實(shí)現(xiàn)(隨便點(diǎn)一下頁(yè)面,就ok)
暫時(shí)不涉及深入就不搞demo地址啥的了,不信復(fù)制測(cè)試一下吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>video播放問題</title>
<style>
#demo{
height: 500px;
width: 1400px;
}
.demo1{
width: 700px;
height: 500px;
float: left;
}
.demo1 video{
height: 400px;
width: 400px;
}
.demo2{
width: 700px;
height: 500px;
float: left;
}
.demo2 video{
height: 400px;
width: 400px;
}
</style>
<script>
function play_v1(v){
v.play()
}
function stop_v1(v){
v.pause();
}
</script>
</head>
<body>
<div>
<div id="v1_box" class="demo1">
<p>1:靜音、自動(dòng)播放</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" muted src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
</div>
<div id="v2_box" class="demo2">
<p>2:有聲音、自動(dòng)播放(至少需要點(diǎn)擊一下文檔,產(chǎn)生交互)</p>
<video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)" src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
</div>
</div>
</body>
</html>
video 實(shí)現(xiàn)靜音自動(dòng)播放
<video id="demo" controls="controls" autoplay="autoplay" muted>
<source src="./conference_2.mp4" type="video/mp4">
</video>
ps: 視頻想要實(shí)現(xiàn)自動(dòng)播放,貌似必須加上muted屬性
到此這篇關(guān)于video實(shí)現(xiàn)有聲音自動(dòng)播放的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)video自動(dòng)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!