2014年12月22日 – 端くれプログラマの備忘録

html5/videoエレメントベースの動画プレーヤーがSafariだけうまく動かないとの相談あり。

JavaScriptで書かれたオープンソースの動画プレーヤーで、動画再生機能はvideoエレメントに委ねて、ロード中インジケータの表示やコントロールパネルの表示と制御、プレイリスト機能の追加などをJavaScriptで行っているみたい。JavaScript側ではブラウザから投げられたイベントを受けて処理を行っているので、Safariだけ挙動がおかしいということは他ブラウザとイベントの内容が違うのではないかと予想。

html/videoのイベントをトレースする

ネットを検索したら参考ページが見つかったので以下にリンク。

HTML5のvideo、発生するイベントの順序がブラウザによって違いすぎる – IT-Walker on hatena
http://d.hatena.ne.jp/Syunpei/20090714/1247571541

HMTL5 test room (勉強用：HTML 5の動作テスト)
http://www.openspc2.org/HTML5/test_room/video/

HTML5 videoエレメントのメディアイベントの仕様はW3Cで見つかる。

4.7 Embedded content — HTML5
http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents

前者ページのJavaScriptコードをほぼそのまま頂いて、自分の環境でも試してみようと思う。

<head>
<script type="text/javascript">
function init() {
 var video = document.getElementById("video1");
 [ "loadstart", "progress", "suspend", "load", "abort",
   "error", "emptied", "stalled", "play", "pause",
   "loadedmetadata", "loadeddata", "waiting", "playing", "canplay",
   "canplaythrough", "seeking", "seeked", "timeupdate", "ended",
   "ratechange", "durationchange", "volumechange"
 ].forEach(function(eventName) {
   video.addEventListener(eventName, function() {
     console.log(eventName);
   }, true);
 });
}
</script>
</head>
<body onload="init()">
<video id="video1" controls>
<source src="sample_movie.mp4" type="video/mp4">
</video>
</body>

<head>

function init() {

var video = document.getElementById("video1");

[ "loadstart", "progress", "suspend", "load", "abort",

"error", "emptied", "stalled", "play", "pause",

"loadedmetadata", "loadeddata", "waiting", "playing", "canplay",

"canplaythrough", "seeking", "seeked", "timeupdate", "ended",

"ratechange", "durationchange", "volumechange"

].forEach(function(eventName) {

video.addEventListener(eventName, function() {

console.log(eventName);

}, true);

});

}

</script>

</head>

</video>

</body>

端くれプログラマの備忘録

日: 2014年12月22日

[Safari] html5/videoエレメントのイベントを調べる

html/videoのイベントをトレースする