SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

HTML 5のマルチメディア(オーディオ/ビデオ)サポート紹介

Webページへのビデオやオーディオの埋め込み

 リスト2に、こうしたイベントの使用例として、だれかがこのURLからOGVムービーにアクセスして[Load(読み込み)]ボタンを押す場合の処理を示します。

 ビデオの再生が可能な状態になると、oncanplayイベントのキャッチによって[Play(再生)]ボタンが有効になります。さらにユーザーが[Play(再生)]ボタンを押すと、ダウンロードされたビデオの再生が実際に開始されます。

リスト2 簡単なWebビデオプレーヤー
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML 5 Video</title>
        <script type="application/javascript">           
function Init_Handler(){
    var myVideo = $("myVideo")
    var playVideoBtn = $("playVideoBtn")
    var videoSrc = $("myVideoSrc").value;
    myVideo.src = videoSrc;
    myVideo.oncanplay = function(){ 
       if (myVideo.readyState == 4){
            playVideoBtn.removeAttribute("disabled");
            } 
         }
    myVideoBtn.onclick = function(){
         myVideo.play()
        } 
    myVideo.load();     };        
window.onload = Init_Handler;
        </script>
    </head>
    <body>        
        <video id="myVideo" width="320" height="240" src=""/><br/>        
        <input id="myVideoSrc" type="text" value=""/>        
        <input id="loadVideoBtn" type="button" value="Load"/>        
        <input id="playVideoBtn" type="button" value="Play" 

disabled="disabled"/>        
    </body>
</html>

 ただし、これは理論上の話です。実際のところは、Firefoxでさえ<video>タグや<audio>タグを完全には実装していないからです。そのため、こうしたイベントの多くはまだJavaScriptのレベルには渡されていません。つまり、実装がまだ完了していない現時点では、やはりload()のあとにplay()を呼び出すことが、外部で読み込まれたビデオリソースを再生するベストな方法のようです。ただし、こうした状況は実装(およびXHTML規格)の具体化に伴って変わってくる可能性が高いので、注意が必要です。

ブラウザベンダーが寄せる関心の高さ

 あらゆる点から見て、ブラウザベンダーがマルチメディア機能をHTML 5規格の開発における極めて重要な鍵として捉えていることは確かなようです。オーディオもビデオも複雑な部類のメディアであること、またWebブラウザ内でのビデオやオーディオの利用を促進できるという期待の高さを考えれば、当然のことでしょう。しかし、HTML 5のマルチメディアがどこでも使えるようになるには、最先端のブラウザ実装にさらなる技術的な進歩が求められそうです。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Kurt Cagle(Kurt Cagle)

ライター、情報アーキテクト、XML News NetworkとMetaphorical Webのウェブマスター。カナダ、ブリティッシュコロンビア州のビクトリア在住。XMLToday.orgの編集長、O'Reilly Mediaの寄稿編集者。現在、XBRLに関する著書を執筆中。彼のTwitterはtw...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/4817 2010/02/10 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー