WEB制作(html・css(スタイルシート))に関する各種メモ書き

HTML5ビデオを埋め込む。またiPhone, iPadで自動再生…。

● HTML5ビデオを埋め込む

<video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png"
  onabort="log('abort');"
  oncanplay="log('canplay');"
  oncanplaythrough="log('canplaythrough');"
  ondurationchange="log('durationchange');"
  onemptied="log('emptied');"
  onended="log('ended');"
  onerror="log('error');"
  onloadeddata="log('loadeddata');"
  onloadedmetadata="log('loadedmetadata');"
  onloadstart="log('loadstart');"
  onpause="log('pause');"
  onplay="log('play');"
  onplaying="log('playing');"
  onprogress="log('progress');"
  onratechange="log('ratechange');"
  onreadystatechange="log('readystatechange');"
  onseeked="log('seeked');"
  onseeking="log('seeking');"
  onstalled="log('stalled');"
  onsuspend="log('suspend');"
  ontimeupdate="log('timeupdate');"
  onvolumechange="log('volumechange');"
  onwaiting="log('waiting');">
<source id='videosource1' src="" type="video/mp4"/>
<source id='videosource2' src="" type="video/ogg" />
<source id='videosource3' src="" type="video/webm" />
</video>

● ビデオの「再生中」「停止中」を js で判断する

var myVideo=document.getElementById("video1"); 
if (myVideo.paused) {
  myVideo.play(); 
}
else { 
  myVideo.pause(); 
} 

jqueryで次のように書くこともできます。

        function is_video_playing()
        {
            var video_dom = $('div.myvideo')[0];
            if (video_dom.paused) {
                return false;
            }
            else { 
                return true;
            }             
        }

● iPhone, iPadでautoplayを行うには…。

残念ながらiOSの仕様上必ず画面を一度はクリックしないと再生はできなくなっています。

関連エントリー

No.736
07/20 09:06

edit

html5