技術

videoタグとIEの話

投稿日:

以前下記のようなコードでvideoの再生が終了したら別な動画をsrcにセットして再度再生するような事がありました。


var video = $('video');
video.on('ended', function(){
video.attr('src','hogehoge.mp4');
video.get(0);
video.play();
});

このコードでモダンブラウザであれば、videoの終了タイミングを取得してsrcの置き換えと再生を行ってくれたのですが、
IEでだけsrcが置き換わったタイミングで「無効なソースです」という表記が出てvideoの再生ができなくなってしまいました。

調べて見たところ、htaccessに下記の追記をしてあげると直るみたいです。


AddType video/mp4 .mp4

上記を記述すると無事にsrcが置き換わってもモダンブラウザと同じように再生されるようになりました。

もしmp4以外でも同様に「無効なソースです」と表示が出るようであれば、
下記の用に該当の拡張子を追記してあげると直るようです。


AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

videoのsrcを置き換えて再度再生するような状況はかなり特殊だとは思いますが、
同じような状況になった際は是非試してみてください。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【ionic】view-titleが更新できない!!

どうも中田です。 ionicのview-titleを動的に変えるってパターンはし …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

rails_logo

[Rails] image_tagを使わずにassets内の画像を指定する方法

こんにちは。さとうです。 今回はimage_tagを使わずにassets内の画像 …

no image

【ionic】リリースする!ちょっとその前に(version指定)

どうも、中田です。 ionic便利ですよね。 コマンド一つでマルチプラットフォー …

Webページまるごと画面キャプチャできるChromeの拡張機能「Full Page Screen Capture」

こんにちは。たなかです。 先日、チームのメンバーにスマホデザインのスクリーンショ …