HTML5ビデオとChrome/Webkit

Question

HTML5ビデオとChrome/Webkit

I've got some trouble with the element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.

SafariやChromeの windows バージョンでも、動画ファイルが再生/表示されません（Webkitの問題かもしれません）。これは、HTMLコードの外観です。

また、MIMEタイプを正規化するために .htaccess ファイルを使用しています。

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

ChromesやSafarisの開発ツール（ネットワークタブ）を見て、 .webm ファイルの再生を選択したように見えますが、 mime type 定義されていないことを示しています）、それはファイルに2回アクセスしようとしているようです。

あなた自身を見てください：

http://www.typeofnan.com ("awesome tab")

I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the tag, Chrome at least plays the audio, but still no video at all.

Reference: Site source on github

4

追加された 06 2月 2012 〜で 02:03 著者 jAndy 編集された 06 2月 2012 〜で 04:39

ビュー: 5

源

ru fr es pt de ar

ビデオは "awsomeness"タブをクリックして表示されるはずですか？

追加された 06 2月 2012 〜で 02:10, 著者 Zakaria, 源

@ザカリア：正確に。ヘッドアップをありがとう、私は質問を更新しました。

追加された 06 2月 2012 〜で 02:11, 著者 jAndy, 源

（FWIW、Chrome 17）要求を2回発行しないで、chromes開発ツールの1番目のエントリはリクエストパラメタでは表示されないが、Fiddler（デバッグプロキシ）で発行されたリクエストのみを表示しているかどうかはわかりませんかつてはsize + video/webmで正しく応答していますが、ダウンロード後に再生されます。

追加された 06 2月 2012 〜で 02:17, 著者 Alex K., 源

4 答え

Have you tried to add codecs additional info into each ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.

// from html5rocks.com, see link on the bottom of answer

http://www.html5rocks.com/jp/tutorials/video/基本/＃toc-markup

2

追加された 06 2月 2012 〜で 02:12 著者 Marek Sebera

源

@jAndyは次のように見えます。私の2番目のヒントは、単一のビデオソースのみを提供し、どのフォーマットがサポートされているかを試してみることです。提供されたリンクにアクセスしてサンプル動画を再生しようとすると、それはあなたのために機能しますか？

追加された 06 2月 2012 〜で 02:19, 著者 Marek Sebera, 源

@jAndyとは、ブラウザ/ OSの組み合わせが正しく動作していて、コードに問題が存在することを意味します。あなたはビデオをエンコードするためにどのコーデックを使用したのですか？

追加された 06 2月 2012 〜で 02:26, 著者 Marek Sebera, 源

@jAndy私の最後のヒントはあなたのビデオをスタンドアロンのページに置くことです。素晴らしい立方体とJS/GLがなくても、あなたがそれを再生できるかどうかテストしてください。もしそうでなければ、あなたのa/vファイルはあなたが思っているようにエンコードされていないという疑惑以外に何もありません。申し訳ありませんが、どちらもあなたを助けない場合

追加された 07 2月 2012 〜で 08:26, 著者 Marek Sebera, 源

こんにちは、本当の解決策は何だったのか教えてください。私は問題の本当の理由に合うように答えを編集したい（またはあなたもできる）。ありがとう

追加された 11 2月 2012 〜で 06:14, 著者 Marek Sebera, 源

はい - コーデックを指定しました。しかし、それは助けにならない+それはまったく必要がないように見える。 webm ファイルbtwのコーデックを追加しました。

追加された 06 2月 2012 〜で 02:13, 著者 jAndy, 源

はい、それは私のために混乱する部分です。また、 html5rocks のデモもchrome/winで正しく動作します。

追加された 06 2月 2012 〜で 02:25, 著者 jAndy, 源

私はあなたが提供したデモページとまったく同じコーデック/構文をすべて追加しました。 win/chrome 16 で私を助けなかった

追加された 06 2月 2012 〜で 02:33, 著者 jAndy, 源

著者 Bill Lockhart · Answer 1 · 2012-09-27T02:43Z

ここに私がそれを働かせるためにしたことがあります。ブラウザは最初に再生できる動画を受け入れるので、まずはWEBMのバージョンを入れ、Chromeに問題はありません。

著者 Zakaria · Answer 2 · 2012-02-06T02:20Z

それは私のマシンで動作します：Windows 7ファミリ+ Chrome 16。私がしたのは、デベロッパーツールを開いたことです。次に、 autoplay = "autoplay" を video タグに追加しました。次に、 webm 形式に関連するhtml source タグを編集しました。

たぶん、それは単なるエスケープの問題（二重引用符で）でした。

著者 Mathias Bynens · Answer 3 · 2012-02-06T04:46Z

私はあなたのビデオURLを使ってこのマークアップを一から書きました。うまくいくようです：



    Download video: MP4 format | Ogg format | WebM format

みんなのためのビデオをご覧ください。