- ベストアンサー
HTML5のテスト方法 - 試用版を有効にして、HTML5とJavaScriptでテストする方法
- HTML5のテスト方法を知りたいです。YouTubeの試用版を有効にし、HTML5とJavaScriptを使用してテストする方法について教えてください。
- test.htmlをGoogle Chromeで開いたところ、黒いバーと[10秒スキップ]ボタンが表示されるだけで、ボタンをクリックしても反応がありません。HTML5のテストはどのように行えば良いですか？
- HTML5のテストのために、YouTubeの試用版を有効にし、test.html内でHTML5とJavaScriptを使用しています。しかし、ボタンをクリックしても動作しません。どのようにしたらHTML5のテストができますか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
各ブラウザでの、<video>タグによる動画形式の対応状況です（2011年10月現在）。 ・Chrome : H.264（*.mp4）, WebM（*.webm）, OggTheora（*.ogv） ・Safari : H.264（*.mp4） ・IE9 : H.264（*.mp4） ・FireFox 3 : OggTheora（*.ogv） ・FireFox 4 : WebM（*.webm）, OggTheora（*.ogv） ・Opera : WebM（*.webm）, OggTheora（*.ogv） 現時点ではChrome安定って感じなんですが、Googleでは既に公式アナウンスで「H.264形式のサポートを打ち切る」と発表しています。ですので来年以降は、Chromeの自動アップデートによりもしかしたら順次、H.264（MP4）形式の動画は再生出来なくなる可能性があります。 考え方としては、 <video src="ブラウザで対応している動画形式のURL"> <p>ブラウザで対応していない場合の注意書き。</p> </video> ～と言うのが基本書式となります。 現状ではまだまだ、IE8以下の環境の人がかなりの数居るので、かならず注意書きは必要かと思われます。何故なら、対応済みの最新版のIE9にアップデートしたくても、WindowsXPの場合はシステム上、IE8以上には出来ないので（かく言う自分もXPなのでIE8以下しか使えません）。業務で使ってる業界標準ソフトの多くがまだまだWindowsXP環境を必須としてるので、後数年はこの状況が続くと考えて下さい。 ＞YouTube動画へのリンク ああ、良くやりそうな勘違いですね(笑)。 まず、<video>タグはブラウザで動画を再生させるためのタグです。対してYouTube動画へのリンクは、特定の動画ファイルへのURLでは無く。あくまでもYouTube動画のサーバにアクセスし、サーバプログラムに特定の動画を呼び出してもらうためのリクエストURLです。つまり「http://www.youtube.com/watch?v=○○○」という動画自体がそもそも存在していないのです。 URLの「watch?v=○○○」の部分はファイル名などでは無く、前述の通りあくまでもYouTubeのサーバプログラムに対して、「○○○という暗号名が付けられた動画を見せて下さい」とお願いしてるだけに過ぎません。これはYouTubeの中でのみ通じる暗号名であって、実際に保存されている動画の名前は「U0hQTVJOUV9FSkNOMF9KSFVHOllPZjB2UlNTSk5F」～みたいな感じでかなり複雑冗長化されています。ちなみにコレは例として書いてるだけで、仮にこの様なファイル名を指定して呼び出しても、YouTube側のサーバの仕様で何も起きません（外部からの直リンクは弾かれるため）。 なので結論から言えば、直にYouTube動画へのURLを<video>タグのsrcとして代入してもエラーになり、結果的には何も表示されません。あくまでも<video>タグは、既存の動画配信サイト（YouTubeやニコニコなど）の手を借りずに、自前で用意した動画ファイルをタグ一つで簡単にブラウザ上で見る事が出来るようにするタグなのだと記憶して下さい。 ＞つまりどういう事だってばよ？？ 基本的に動画投稿サイトなどのURLを<video>タグのsrcに指定してもダメ。ただし将来的に何処かのサイトがそういうサービスをやり出すかもしれないけど、それは泥棒に金庫のカギを無料で貸し出す様な物なので、多分未来永劫永久に無いと思います(笑)。 <video>タグのsrcに指定して良いのは、ちゃんとファイルの存在が確認されていて、尚かつ各Userが使っているブラウザで再生可能な形式だった場合のみ有効になります。なので現状、もう既にこれだけ便利な動画投稿サイト（YouTubeやニコニコなど）が氾濫している世の中で、どれほどの実効性を持ったタグなのかは正直、微妙な存在です…。 なので使用状況としては専らローカル環境での、例えばソフトウェアの説明書をHTML5で作成し。その中で操作手順を解説した動画を見せるために使うとか？そんな限定的な状況での使用に限られるんじゃないかと思います。少なくとも現状の、GoogleとAppleの動画形式での対立なども考えると、宣伝文句とは裏腹にあまりweb界隈では使われなさそうな感じがしてます。 P.S. 単純にYouTube動画の再生とか秒送りとかをJavaScriptでコントロールしたいのであれば。YouTube側から正式なAPIが公開されてるので、それを用いれば割と簡単に実装出来ます（ある程度のJavaScriptの知識は必須ですが）。 ＞http://code.google.com/intl/ja/apis/youtube/js_api_reference.html
その他の回答 (1)
- 4017B
- ベストアンサー率73% (1336/1814)
まず例文の、 ・http://www.youtube.com/demo/google_main.mp4 ～が存在しないファイル、または無効なURLです。 再生されるべき動画ファイル自体が存在しないので、何も表示されないのは当たり前です。以上、終了！ P.S. YouTubeの「HTML5試用版」というのは、チェックをONにして置いたら。YouTube動画で新しい規格の動画ファイル（WebM）が合った場合、自動的に再生候補の中に表示してくれるという事なのでは？？ YouTubeのサイトの説明にも、 - - - - - - - - - - - - - - - - - - - - ＞http://www.youtube.com/html5 HTML5 対応のブラウザを使用している場合は、自動的に試用版が表示されることがあります。 - - - - - - - - - - - - - - - - - - - - ～とあります。なので殊更何か、User側で何か能動的にテストする様な主旨の物では無い様な…。 とりあえず自分の環境はChromeなので。適当にローカル環境で、自前でMP4形式動画を用意して<video>タグで埋め込んでみたら、上記のHTML5とJavaScriptで普通に再生されましたよ。
補足
ご回答有難うございます。 超初心者的質問で恐縮ですが、HTML5とJavaScriptで再生させる動画は、MP４形式で保存されているものに限られるのでしょうか？ Google Chrome でブラウズ出来る"http://www.youtube.com/watch?v=○○○&feature=related" という動画にリンクしてみたのですが、再生できませんでした。 何が不調の原因でしょうか？
お礼
丁寧な説明を頂き、誠にありがとうございました。 なるほど、そういうことか・・・・・と感じ入って、納得しました。 私にとっては HTML5 を触るのは時期尚早、ということが理解できました。