video實現有聲音自動播放

時間 2019-11-18

標籤 video 實現聲音自動播放简体版

原文原文鏈接

video實現自動播放有聲音

需求：老闆見人家能夠的，咱們的也要能夠！！！
前端：自動播放，簡單...
要實現：鼠標移入視頻播放同時有聲音，移出讓你暫停，，，，，html

問題集合

1- 自動播放實現沒有聲音，
2- 怎麼實現有聲音自動播放？
3- 鼠標移入移出實現...前端

解決

1——瞭解故事背景：ide

由於曾經某些「邪惡」的前輩們，在頁面中展現了不少相似測試

是兄弟就一塊兒來-----我是(⊙_⊙)輝？？？
ui

動感的畫面，有趣的話語，曾經也被吸引住了，只是那個聲音.....
簡而言之————廠商認爲用戶體驗很差，禁了聲音
2—— 相關資料、實現：
其實，也能夠實現自動播放時聲音也播放this

在體驗差的同時，廠商爲了照顧開發者，容許用戶交互以後實現播放，例如點擊等操做（神馬鬼意思？）code

即兩種選擇：
1—— 視頻實現自動播放，可是要靜音，在標籤中添加muted屬性，就能實現自動播放
2—— 視頻實現自動播放，有聲音，這個要在文檔與用戶之間有操做以後才能實現（隨便點一下頁面，就ok）視頻

暫時不涉及深刻就不搞demo地址啥的了，不信複製測試一下吧htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。