video實(shí)現(xiàn)有聲音自動(dòng)播放的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-05-20 15:58:40 作者：傻狍子

這篇文章主要介紹了video實(shí)現(xiàn)有聲音自動(dòng)播放的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

video實(shí)現(xiàn)自動(dòng)播放有聲音

需求：老板見人家可以的，我們的也要可以?。?！
前端：自動(dòng)播放，簡(jiǎn)單...
要實(shí)現(xiàn)：鼠標(biāo)移入視頻播放同時(shí)有聲音，移出讓你暫停，，，，，

問(wèn)題集合

1- 自動(dòng)播放實(shí)現(xiàn)沒(méi)有聲音，
2- 怎么實(shí)現(xiàn)有聲音自動(dòng)播放？
3- 鼠標(biāo)移入移出實(shí)現(xiàn)...

解決

1——了解故事背景：

因?yàn)樵?jīng)某些“邪惡”的前輩們，在頁(yè)面中展示了很多類似

是兄弟就一起來(lái)-----我是(⊙_⊙)輝？？？

動(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播放問(wèn)題</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)文章，希望大家以后多多支持腳本之家！

Tag：Video 自動(dòng)播放

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

video實(shí)現(xiàn)有聲音自動(dòng)播放的實(shí)現(xiàn)方法

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容