Webページにビデオを埋め込む（HTML）

StackOverflow https://stackoverflow.com/questions/1200719

質問

動画をウェブページに埋め込みたい。
フラッシュは膨大な数のプラットフォームで使用できないため、使用したくありません。
まだ標準ではないので、HTML5を使用したがりません（標準ですが、ほとんどの人はHTML5をサポートするブラウザを持っていません）

他の方法はありますか？または、HTML5とブラウザをアップグレードするように指示する巨大なバナーに固執する必要がありますか？

役に立ちましたか？

解決

HTML5ビデオと、サポートされていないブラウザーのフォールバックを組み合わせる方法はいくつかあります。いくつかの特定のソリューションが実証されています。

1つの例は、Camen Designの Video for Everybody です。これはHTML5に準拠し、 IEおよび古いブラウザ用のネストされたオブジェクトタグ。これは、標準に準拠し、後方互換性があり、将来の証拠である必要があります。

他のヒント

HTML 5は標準ではありません。下書きです。いつかは標準になるでしょう。おそらく最初に変更されるでしょう。

ビデオをページに埋め込む場合、少なくとも今日では、Flashが利用可能な最良のサポートオプションです。 Flashをお持ちでない（または専用のビデオプレーヤーでビデオを視聴したい）人のためのオプションとして、通常のダウンロード可能なバージョンへのリンクを提供します。

人々にブラウザをアップグレードするように言っても、大した助けにはなりません。私の知る限り、安定版リリースでビデオをサポートしている唯一のブラウザはFirefoxです。 Chromeは、開発バージョン以外ではサポートしていません。 Operaがサポート付きの安定したビルドをもたらしたとは思いません。 Microsoftは確かにまだInternet Explorerにそれを追加していない。サファリよくわかりません。

本当にFlashを避けたい場合は、HTML 4.01オブジェクトを使用できます。

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

<！>＃8230;ユーザーがインストールされたビデオを処理できるプラグインを持っていることを願っています。

Cortado に出会いました。 OGGを再生するJavaアプレットです。 HTML5のステータスを確認するとそれに気づいたので、実際には David Dorward に感謝する必要があります。 Firefoxは、次のようなものを使用することを提案します。

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>

Javaは、フラッシュよりもはるかに多くのプラットフォームで使用できます。この場合、HTML5へのフォールバックであれば、

（ソース）

少し遅れていることはわかっていますが、VLCをご覧になりましたか？

Webサイトに埋め込むことができ、Windows、Mac OS <！> ampで実行できます。 Linuxは無料のオープンソースであり、多くのビデオ/オーディオ形式をサポートしています...

欠点は、play / pause / set volume / ...機能を備えた素敵なGUIがないため、自分で作成する必要があることです。

次の記事をご覧ください： http： //www.videolan.org/doc/play-howto/en/ch04.html#id310965

多くの大規模なWebサイトがFlashを使用してビデオを再生しているのはなぜだと思いますか？おそらくそれが利用できないからではありません...もちろん、ビデオコンテンツをWebページに埋め込む代替手段もありますが、可用性が問題になる場合は、現時点でFlashが最善の方法です。

xHtml + RDFaに非常に興味があるため、この問題に取り組みました。HTML5以外のブラウザーをブロックせずに、HTML5ブラウザーでxHtml 1.0の厳格なドキュメントでビデオを再生する方法を見つけました。

ここでjQueryプラグインを公開しました： https://github.com/charlycoste/xhtml-video

およびデモはこちら： http://demo.ccoste.fr/video

実際には、これはHTML5タグを使用する場合ほど強力ではありませんが、少なくとも...動作します！

このソリューションはjavascriptとcanvasに依存していますが、<object>タグを使用することで適切に劣化させることができます（これが私のjQueryプラグインの機能です）。

実際に行うことは簡単です：

  1. メモリ内に新しいタグ要素を作成しますが、DOMドキュメントに追加しません：

    var video = document.createElement('video');

  2. メモリに新しいcanvas 要素を作成しますが、DOMドキュメントに追加しません：

    var canvas = document.createElement('canvas');

  3. 新しいimg 要素を作成し、それをDOMに追加します。

    // var parent = ... ;
// var width = ...;
// var height = ...;
var img = document.createElement('img');

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

  4. ビデオの再生中（video.play()）、キャンバスに各フレームを描画します（DOMに追加されていないため、表示されません-DOMは有効なxhtml 1.0ドキュメントのままです）

    canvas.getContext("2d").drawImage(video, 0, 0, width, height);

  5. 最後に、toDataURL()要素のsrcメソッドを使用して、フレームのbase64エンコード画像を取得し、それをcanvas.toDataURL('image/jpeg', quality)要素のquality属性に配置します。

    img.setAttribute('src', canvas.toDataURL());

これを行うことにより、JavaScriptオブジェクトがDOMからビデオを再生し、各フレームを<=> DOM要素にプッシュします。そのため、ブラウザのHTML5機能を使用してビデオを再生できますが、HTML5ドキュメントは必要ありません。

ブラウザにHTML5機能がない場合、または使用されているコーデックを処理できない場合、ネイティブの<=>動作にフォールバックします（一般的に、ブラウザはVLCなどのプラグインを探します。など...）

また、ビデオを再生する方法がない場合（プラグインがない場合）、<=>タグ内で提供される代替コンテンツが使用されます。

パフォーマンスの側面：非常に高い消費プロセスが発生するため、再生がちらつく可能性があります...これを回避するには、この方法でjpeg圧縮を使用することでレンダリング品質を低下させることができます。 0および1。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top