節約テクノロジ >

ChromecastでHelloWorld!(任意のURLのMP4を再生)

目次

  1. 実行サンプル
  2. 解説
  3. ソースコード

実行サンプル

解説

GoogleのChromecastでMP4を再生するためのミニマムサンプルです。ChromeまたはChromiumで動作します。あらかじめChromecastのExtentionのインストールが必要です。

再生するだけが目的なので、エラー処理や状態取得は行いません。再生終了後は拡張アイコンより出力を停止してください。 ソースの「video/mp4」の部分を書き換えるとMP4以外の静止画なども再生できます。

ローカルのファイルシステム上ではエラーが発生しますので、かならずhttpサーバーに設置してください。

動画サンプルはwww.html5videoguide.netものを使用しています。

ソースコード

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

<script>
function onError(){
    document.getElementById('message').innerHTML='Error';
}

window['__onGCastApiAvailable']=function(loaded,errorInfo){
  if (loaded) {
         var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
        var sessionRequest = new chrome.cast.SessionRequest(applicationID);
        var apiConfig = new chrome.cast.ApiConfig(sessionRequest,function(){},function(){});

        chrome.cast.initialize(apiConfig, 
            function(message){
                document.getElementById('castButton').disabled=false;
            },onError);
  }
}

function cast(){
    url=document.getElementById("url").value;
    if(!url)return;
    chrome.cast.requestSession(function(session){
        var mediaInfo = new chrome.cast.media.MediaInfo(url);
        mediaInfo.contentType = 'video/mp4';
        var request = new chrome.cast.media.LoadRequest(mediaInfo);
        request.autoplay = true;
          session.loadMedia(request,function(){},onError)
    },onError);
}
</script>

</head>

<body>
    <div>
        <input type="text" size="70" id="url" value="http://www.html5videoguide.net/presentations/HTML5_Video_LCA2011/HelloWorld.mp4"></input>
        <input type='button' onclick='cast()'  value='Cast'  id='castButton' disabled></input>
        <div id='message'></div>
    </div>
</body>
</html>

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > ChromecastでHelloWorld!(任意のURLのMP4を再生)