オーディオとビデオの再生ビデオオーディオ

オーディオとビデオの再生（ビデオ、オーディオ）と共通ピット処理

はじめに背景

HTML5は、Webページを表示される前にFLASHは、モバイル時代に入った後、しかし、インターネットの継続的な発展と、Flashのが世界を席巻しているが、主にフラッシュのActiveXプラグインだけでなく、マイクロソフトのSilverlightによるオーディオおよびビデオへのアクセスは、後に、表示するために導入しましたフラッシュは、多くの場合、脆弱性、セキュリティ上の問題、パフォーマンスの低下を破っており、Webブラウジングのバッテリーデバイスはまたように比較的大きく消費し、PCが生まれたため、フラッシュが適応することができない、本質的であるため、HTML5の脚光を浴び、徐々に主に置き換えます機能モバイル時代、自身がフラッシュをあきらめてもアドビ、大手メーカーは徐々に放棄さそう。だから、HTML5は、メインのWebマルチメディアの将来の方向性です。

オーディオフォーマット
　　形式の定義で、アムウェイに：

オッグ：新しいオーディオ圧縮フォーマットは、完全に、無料のオープン、無特許の制約です。

MP3：オーディオ圧縮技術です。大幅に音声データの量を減らすように設計されています。

WAV：マイクロソフト社は、サウンドファイル形式を開発し、CD品質のサウンドファイルはほぼ同じです。

オペラ、クロムと三つのモードのためのFirefoxのサポート、オープンソース電位の競合他社がoggのブロックされた中に、MicrosoftとApple mp3形式は、その特許の利益のためのソフトスポットを持っていながら、MPEGに対して順序をOGG（公式の会社が存在しないため、音声がmp3である）、フォーマットは、オーディオとビデオ・テクノロジーを開発し、彼の関係はより微妙です、なぜなら特許訴訟の事業推進のOGGのリスクを、直接、OGGを使用するように誰もまだ訴訟を持っていない理由oggの理由を敢行大きな魚の餌、価値がない訴訟がないので、しかし、今度は、訴訟が失敗したら、oggのは、誰が使用していないことを後で、MPEGを侵害MPEGを証明していません。

オーディオの標準API

SRC：オーディオのURLを再生します。
プリロード：「自動再生」は、この属性は無視されている場合かどうか、事前にロードされました。
自動再生：自動再生するかどうか。
ループ：ループするかどうか。
コントロール：そのような再生ボタンなど、コントロールバーが付属してブラウザを表示するかどうか。

お使いのブラウザは、オーディオ再生をサポートしていません。

オブジェクト// JSドムの取得
VAR = audio_test新しい新しいオーディオ（ "test.mp3を"）;
VAR audio_test =のdocument.getElementById（ "audio_test"）;
DOMオブジェクトのメソッド：

canPlayType(type);能否播放某个资源文件，返回三个字符串之一：empty、maybe 或 probably
load();重新加载资源
pay();播放
pause();暂停

DOMオブジェクトのプロパティ、それだけでより多くのは、ここでいくつかの重要な属性を示しています。

Media.currentSrcが; // URLの現在のリソース返し
Media.src =値; //は現在のリソース設定、またはURLを返し
Media.currentTime =値; //現在再生位置を、位置変更することができる割り当て
Media.volume =値; / /音量
Media.muted =値; //ミュート
3.オーディオ実際にピット

オーディオラベルAPIは非常にシンプルですが、それだけでPCのブラウザが優れているサポートしていますが、理由は交通問題の様々なモバイルエンドピットがあります。

（1）自動再生

トラフィックの問題は、Safariは、ユーザーがトラフィックの問題を引き起こす可能性がありますオーディオファイルをダウンロードしましょうと思う確認しますので、IOS、アンドロイドの高いバージョン（5.0）に加えて、この機能を無効にも、機械の一部であるため、IOS Safariが理由の公式説明によると、自動再生属性を無視することですこの機能をバイパスするため、この問題の存在は、いくつかの処理を行う必要があります。

ソリューションは、ユーザーがボタンをクリックしたときに音楽を再生すると、ページ上のボタンを追加することです

$（ '＃1 myBtnです'）（ 'touchstart' ON、関数（）{
VARオーディオ= $（ '＃オーディオ'）[0];
audio.load（）;
audio.pause（）;
audio.play（）。
}）
　　（2）シングルトンの質問は：理由は、トラフィックの問題の推定され、iOSのSafariのオーディオオブジェクトを使用すると、複数のオーディオをロードするときに複数のオーディオファイルを再生できないことを意味シングルトン、ある、後者は以前のものを上書きします、アイデアはCSSの原理を示すスプライトに似た位置を、設定することにより、異なる音楽のサウンドを再生するためにロードした後に一つのファイルに2つのオーディオファイルをマージすることで解決策があります。

var audio= $('#audio')[0],
audioConfig= {
    sound1: {//第一个声音
        start: 0,
        length: 1
    },
    sound2: {//第二个声音
        start: 1.5,
        length: 2
    }
}

//サウンドの1を再生

audio.currentTime = audioConfig.sound1.start。
audio.play（）;

VAR stopFunc =関数（）{
IF（this.currentTime> = audioConfig.sound1.start + audioConfig.sound1.length）{
this.pause（）
}
}

audio.addEventListener（ 'timeupdate'、stopFunc、偽）;

//サウンド2をプレイ

audio.currentTime = audioConfig.sound2.start。
audio.play（）;

VaRのstopFunc2 =関数（）{
IF（this.currentTime> = audioConfig.sound2.start + audioConfig.sound2.length）{
this.pause（）
}
}

audio.addEventListener（ 'timeupdate'、stopFunc2、偽）;

（3）ループ

一部のモデル（IOS）ループ障害、ソリューション、手動でトリガモニター再生完了イベントは、遊びます

<！DOCTYPE HTML>

Looping Audio

ビデオフォーマット

フォーマットに対応するビデオフォーマットの3種類があります。

 1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；
 2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；
 3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

ビデオ標準のAPI

SRC：ビデオのプロパティ
再生されていない表示するには、ビデオ表紙画像：ポスター
予圧を：プリロード
自動再生：自動再生
ループ：ループ
制御：内蔵のブラウザコントロールバーの
幅：ビデオ幅
高さ：ビデオの高さを

Media.canPlayType（タイプ）; //リソースが何らかの形遊ぶことができるかどうか
Media.loadを（）; //リロードSRC指定されたリソース

Media.play（）; //プレイ

Media.pause（）; //一時停止

ピット内のビデオ

（1）オートプレイ、同様のオーディオタグ、ビデオも同様の操作が必要

（2）ビデオプレーヤ、収束がDOMのsrc属性の方法が提供され、そして最初のビデオが終了すると、src属性セットは、その後もプレイ複数プレイできるときに、達成するCURRENTTIME方法を提供、使用されるべきでもありますビデオ、しかし欠点は、あなたが新しいビデオバッファ時間をロードする必要があるということです。

（3）ループタグオーディオのようなイベントによって処理され

（4）プリロード下プリロードIOS属性がアンドロイドでサポートされていません検出することはできませんが正常にロードされ、一般的な方法は、方法を中断し、すぐに、ビデオを再生することです

ビデオコンテンツは、N番目のフレームの再生を開始します
ここに画像を挿入説明

オーディオとビデオの再生ビデオオーディオ

おすすめ