Firefox45でvideoタグ内のembedタグの動画が勝手に再生される
Firefox 45.0 である動画のページを開いた時に、スタートボタンを押してないのに音声が流れた。映像と音声が別になっていて音声だけが先にスタートしてしまったのかと思いながら再生ボタンをクリックしたら、流れている音声とは別に映像に合わせた音声も流れ始めた。映像上で右クリックして再生速度を2倍にしたら、映像とそれに合わせた音声は倍速になったが、ページを開いた時に流れ始めた音声は通常の速度のままだった。そのページのソースを確認したら、動画の部分は次のような構造になっていた。
<source src="~">
<embed autoplay="false" controller="false" src="~">
</video>
embedタグのsrcに記載された動画の音声が再生されているらしい。autoplay="false" とあるが、HTML5では無視されるらしい。音声だけでなく映像もスタートしているのかもしれないが、embedタグがvideoタグの中にあると見えない。
IE11で確認したら問題は生じなかった。また、後に Google Chrome Portable 49.0.2623.87 で確認しても問題は生じなかった。同じページはFirefoxの以前のバージョンでも見ていたが、問題は生じてなかった。45.0にアップデートしたことにより生じたらしい。
この件についてはしつこくツイートしている。
Firefox 45.0 のバグかも。HTML5動画が埋め込まれたページを開くと、動画の再生ボタンをクリックする前に音声だけが再生を始めた。再生ボタンを押すと通常の再生も始まって、音声が二重になった。この現象は新規プロファイルでも生じた。IE11で確認したが生じなかった。
— 正己 (@self7777) 2016年3月15日
再現実験のために、HTML5の動画をネット上で見つけて、ブログにアップロードして確認したら再現できた。そのページは開くたびに音が流れて迷惑なので、この記事をアップロードした後に削除した。代わりに、再現確認のためのページを用意した。
- 20160317_1.html(開いたら音声が流れるので注意)
- 20160317_2.html(開いたら大きな音が流れるので注意)
それぞれのページの主要部分のソースは次のようになっている。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
embedタグが含まれているvideoタグ
</title>
</head>
<body>
<video controls style="border:1px solid gray; padding:5px;">
<source src="sample_iPod.m4v">
<embed src="sample_iPod.m4v">
</video>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
embedタグが含まれているvideoタグ
</title>
</head>
<body>
<video controls style="border:1px solid gray; padding:5px;">
<source src="sample_iPod.m4v">
<embed src="mp4_h264_aac.mp4">
</video>
</body>
</html>
sourceタグの動画とembedタグの動画が異なる 20160317_2.html の方が確認しやすい。ページを開いた時に再生されるのは、embedタグ内のmp4_h264_aac.mp4(開いたら大きな音が流れるので注意)である。
この問題はvideoタグにautoplay属性が付加されているとsourceタグの動画とembedタグの動画が同時に始まるので気付きにくい。実際に、そのようなページもあった。そこでも、動画の再生速度を2倍にすると音がずれるので気付く。
Firefoxがアップデートされればこの問題が無くなるのか、それともこれはソースの書き方の問題でFirefoxの側には問題が無いのでそのままなのかは分からない。できれば改善してほしいが、それまではサイトの運営者がソースを工夫して音声が自動再生しないようにしてほしい。embedタグを追加しているのは、HTML5動画が再生できないブラウザへの配慮だと思うが…。この問題は速やかに改善されることを期待したが改善されそうにないので、この記事をアップロードしてからは諦めて、音声が二重になった状態で我慢して閲覧することにする。
ちなみに、この問題を指摘している情報を探したのだが、私の探し方が下手なせいか見つからなかった。仕方なく、この記事を書くことにした。
追記(2016/3/20):
この問題を検証するためのファイルを作った。
→【embedタグが含まれているvideoタグ(ファイル一覧)】
それぞれを Windows 7 の Firefox 45.0.1 とWindows XP の IE8 で確認した。結果は次の通り。
- ・20160317_1.html
- Firefoxでembed内動画の音声が自動再生。IE8では何も表示されず。
- ・20160317_2.html
- Firefoxでembed内動画の音楽が自動再生。IE8では何も表示されず。
- ・20160317_3.html
- Firefoxでembed内の動画は再生されない。IE8では何も表示されず。
- ・20160317_4.html
- Firefoxでembed内動画の音楽が自動再生。IE8では何も表示されず。
- ・20160317_5.html
- Firefoxでembed内動画の音楽が自動再生。IE8では何も表示されず。
- ・20160317_6.html
- Firefoxでembed内の動画は再生されない。IE8では空白が表示されるだけ。
- ・20160317_7.html
- Firefoxでembed内の動画は再生されない。IE8ではembed内に記載したYouTubeのフラッシュ動画が表示され、手動で再生できる。
- ・20160317_8.html
- Firefoxではsourceタグの動画が表示され、手動で再生。他の動画の音は無い。IE8ではsourceタグとは別の動画がflowplayerでフラッシュ動画として?表示され、自動で再生を始める。
- ・20160317_9.html
- Firefoxではsourceタグの動画が表示され、手動で再生。他の動画の音は無い。IE8ではflowplayerだけ表示され、何も再生できない。
- ・20160317_a.html
- Firefoxではsourceタグの動画が表示され、手動で再生。他の動画の音は無い。IE8ではsourceタグと同じ動画がflowplayerでフラッシュ動画として?表示され、自動で再生を始める。
追記(2016/4/27):
Firefox 46.0 にアップデートしたら(リリースノート)、この記事の問題は生じなくなった。
コメント 0