web-dev-qa-db-ja.com

iOS10でビデオが再生されないChrome

このビデオスニペットの何が問題になっているのかがわからないようです。

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

ビデオはSafariで問題なく再生されます（以前のバージョンのiOSに対してテストされていませんが、自動再生の問題があることが唯一の懸念事項ですか？）が、Chromeで表示されるのは、カバー画像と何もトリガーしない再生ボタン何かが足りないのですか？それを機能させるために本当にJSを使用する必要がありますか？

更新：iOSでWebmファイルを再生する際に問題があるようですChrome-さまざまな場所からいくつかのファイルを試しましたが、再生するにはまずダウンロードする必要があるようです。

htmlgoogle-chromevideoios10playback
17
Staffan Estberg

Google Chrome現在バグがあり、.webmビデオが発生した場合は自動再生されません何よりも公開されているコードを使用してみてください ここ 。

いつものようにHTML5 videoを作成します：

<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
    <source src="aurora.webm" type="video/webm"> </source>
    <source src="aurora.mp4" type="video/mp4"> </source>
</video>

以前のアドバイスが役に立たない場合は、Githubでスクリプト再生の例 video.js および simpl を使用してみてください。

また、 この投稿 モバイルブラウザでのミュートされた自動再生専用をお読みください。また、Stack Overflowの投稿も読むと便利です– デバイスがサイレントビデオを再生するかどうかを効率的に検出します 。

9
Andy

このビデオスニペットの何が問題になっているのかがわからないようです。

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

...更新：iOSChromeでWebmファイルを再生する際に問題があるようです。

最も簡単で最良の修正は、最初にmp4ファイルを宣言してから、2番目にwebmを宣言することです（表示されている順序の逆）。 iOSは、HTML5ビデオタグの最初のファイルとしてmp4を期待していると思います。 iOSが認識するのはsrc="sample.webm"これは有効な予想されるMPEGコーデックではないため、 "...何もトリガーしない再生ボタン"になります。どこかでサイレントエラーが発生しました。

試してみてください：

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/mp4" src="sample.mp4"></source>
    <source type="video/webm" src="sample.webm"></source>
</video>

補足：私の意見ですが、メインのサポートシステム（Googleベースの技術）はすでにmp4を処理できるため、ここにwebmがあることは冗長だと思います。

[エンドユーザーの]ブラウザーでこれらのビデオデコーダーを提供する方がよいでしょうmp4またはogv（Firefoxの場合）。

PS：SIMデータが許可されているため、ほとんどのモバイルシステムで自動再生が無効になっています。エンドユーザーは、そのビデオの再生を選択する必要があります。ネット上には巧妙な回避策がある可能性がありますが、これは予想される動作であるため、現在のコードでは問題になりません。

4
VC.One