video實現自動播放有聲音
需求：老板見人家可以的，我們的也要可以！！！
前端：自動播放，簡單...
要實現：鼠標移入視頻播放同時有聲音，移出讓你暫停，，，，，
問題集合
1- 自動播放實現沒有聲音，
2- 怎么實現有聲音自動播放？
3- 鼠標移入移出實現...
解決
1——了解故事背景：
因為曾經某些“邪惡”的前輩們，在頁面中展示了很多類似
是兄弟就一起來-----我是(⊙_⊙)輝？？？
動感的畫面，有趣的話語，曾經也被吸引住了，只是那個聲音.....
簡而言之————廠商認為用戶體驗不好，禁了聲音
2—— 相關資料、實現：
其實，也可以實現自動播放時聲音也播放
在體驗差的同時，廠商為了照顧開發者，允許用戶交互之后實現播放，例如點擊等操作（神馬鬼意思？）
即兩種選擇：
1—— 視頻實現自動播放，但是要靜音，在標簽中添加muted屬性，就能實現自動播放
2—— 視頻實現自動播放，有聲音，這個要在文檔與用戶之間有操作之后才能實現（隨便點一下頁面，就ok）
暫時不涉及深入就不搞demo地址啥的了，不信復制測試一下吧
<!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：靜音、自動播放</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:有聲音、自動播放（至少需要點擊一下文檔，產生交互）</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>