BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

音声付き動画の自動再生機能の実装方法

2022-01-13 08:45:40

音声付き動画自動再生

条件です。上司ができる人を見れば、私たちもできるはずです。
フロントエンド：自動再生、シンプルな...
実現方法：音を出しながらマウスオーバーで動画を再生し、一時停止できるように移動する，，，。

質問集

1- 音のない自動再生の実装。
2- サウンド付きのオートプレイを実現するには？
3- マウスオーバーとマウスアウトで実現する...

<スパン 解決方法

1 - 物語の背景を理解する。

というようなページをかつてたくさん見せてくれた"evil"な先人もいたからです。

兄弟なら、-----においでよ。 私は(⊙_⊙)ファイ?

ダイナミックな映像、面白い言葉、そして一度はその声だけで魅了される・・・・・・。
要するに ---- ベンダーはユーザーエクスペリエンスが良くないと考え、音を禁止しているのです。

2 - 関連情報、実装。
実は、音声も再生する自動再生を実装することも可能です。

エクスペリエンスは悪いですが、このベンダーは、クリックなどのユーザーインタラクションの後に再生できるようにして、開発者に配慮しています（一体どういうことなんだ？）

つまり、2つの選択肢です。
1 - 自動再生を実現する動画ですが、タグに muted 属性を追加してミュートします。
2 -- 動画を音声付きで自動再生する。文書とユーザーの間で何らかの操作が行われた後に実現する（ページ上でランダムにクリックすればOK）。

当分の間、深い関与はデモのアドレスか何かを得ることはありません、それをテストするコピーを信じてはいけない 

<!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 playback issues</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: mute, autoplay</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:with sound, autoplay (at least need to click on the document to generate interaction) </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 id="demo" controls="controls" autoplay="autoplay" muted>
<source src=". /conference_2.mp4" type="video/mp4">
</video>

追記: 動画を自動再生するには muted 属性が必要なようです。

動画で音声付き自動再生を実現する方法については、こちらの記事をご覧ください。動画の自動再生については、スクリプトハウスの過去記事を検索するか、以下の記事を引き続き閲覧してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します