HTML5マルチメディア

1.インターネット上のオーディオ

今までは、まだWebページ上でオーディオを再生するために設計された標準は存在しません。

今日、(Flashなど)プラグインを通じてほとんどのオーディオが再生します。ただし、すべてのブラウザは、同じプラグインを持っていません。

ページ上のHTML5所定の基準エンベデッドオーディオ要素、即ち、の使用

2.音楽の<audio>タグを挿入します

現在、

<audio controls>
    <source src="./mp3/卡农慢摇版.mp3"></source>
</audio>

(ない同じ効果各ブラウザ)に示すように

自動再生とビューを設定するには
、この属性が存在する場合は、オーディオ再生をすぐに準備ができた後:自動再生を。
ループ:この属性が存在している場合は、いつでもオーディオ終わり、再び再生を開始します。
注:2018年10月でのアップデートは、オーディオ、ビデオメディア自動再生自動再生を閉じた後、クロムは、Firefoxの新バージョンがサポートされていません。それはちょうどそれが自動プレイmp3形式をサポートしていないと述べたが、自動的に音声フォーマットをサポートOGGを再生することができます

<audio controls autoplay loop>
    <source src="./mp3/卡农慢摇版.mp3"></source>
</audio>

その他の属性:
PRELOAD:オート| |メタデータは、ページのロードが後どれもオーディオロードするかどうかを指定しません
。この属性が存在する場合は、オーディオ出力がミュートされている:ミュート。

3.挿入したビデオ<動画>タグ

現在、

<video controls>
    <source src="./source/最终幻想神罗三巨头乱斗.mp4"></source>
</video>

4. <ソース>タグ

ラベルのメディア要素(例えば

<audio controls autoplay loop>
    <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
    <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
    您的浏览器不支持 audio 元素。
</audio>

スイッチングメディアファイル

あなたは、再生するファイルを切り替えるには、オーディオやビデオのsrc属性を操作することができます

<body>
    <audio controls autoplay loop>
        <source src="./source/卡农慢摇版.ogg" type="audio/ogg"></source>
        <source src="./source/卡农慢摇版.mp3" type="audio/mpeg"></source>
        您的浏览器不支持 audio 元素。
    </audio>
</body>

<script>
    var audio = document.getElementsByTagName("audio")[0]
    // 8秒钟后会切换到另一首歌
    setTimeout(function(){
        audio.src="./source/再见警察.mp3"
        console.log(audio.src)
    },8000)
</script>

6.カスタムビデオプレーヤー

ネイティブ再生制御パネルスタイル別のブラウザで同じではありません、それが一般的に使用されるカスタムビデオプレーヤーである
カスタムビデオプレーヤー、まだvideoタグを使用しますが、再生制御パネルのネイティブを使用せずに、しかし、使用されますコントロールパネル独自の定義。
カスタムコントロールパネルjsがなど、プログレスバーコントロールをドラッグし、曲/次の曲、ボリュームコントロールをリッスンする必要があります

注意:直接jsのコードを呼び出す最新のブラウザが自動再生をシールドしているので、再生をコントロールすることは無効で、リスナーが再生コールバックを制御するために設定する必要がありますクリックしてください

一般的に使用される方法:
ロード()ビデオをロードするために
プレーを()ビデオ再生する
(一時停止)一時停止ビデオ

共通属性:
一時停止した動画が一時停止されているかどうかの状態
期間(秒)ビデオの長さ
(秒単位)CURRENTTIMEビデオ現在の進行状況

一般的なイベント
ユーザーoncanplayは、ビデオ・トリガ再生を開始することができます
トリガontimeupdate再生進捗更新
onended再生終了時にトリガを

おすすめ

転載: www.cnblogs.com/OrochiZ-/p/11609610.html