web-dev-qa-db-ja.com

HTML5ビデオの自動再生を無効にする

Html5ビデオ自動再生を無効にするにはどうすればよいですか？

私が試したもの：

<video width="640" height="480" controls="controls" type="video/mp4" autoplay="false" preload="none"><source src="http://mydomain.com/mytestfile.mp4">Your browser does not support the video tag.</video>
html5videoautoplay
31
kkgzjjmj

ブラウザが自動再生文字列を見つけると自動再生されるため、自動再生属性を削除します。

自動再生はブール型ではありません。

また、次のように、タイプはソース内に入ります。

<video width="640" height="480" controls preload="none">
   <source src="http://example.com/mytestfile.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

リファレンス： http://www.w3.org/TR/html-markup/video.html

45
caulitomaz

動画タグの自動再生を削除します。このようなコードを使用してください

<video class="embed-responsive-item"  controls>
   <source src="http://example.com/video.mp4">
   Your browser does not support the video tag.
</video>

それは100％働いています

7
rsnr4u

ソースタグにautostart="false"を追加してみてください。

<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="http://example.com/mytestfile.mp4" autostart="false">
Your browser does not support the video tag.
</video>

JSFiddleの例

5
anita
<video class="embed-responsive-item"  controls>
   <source src="http://example.com/video.mp4" autostart="false">
   Your browser does not support the video tag.
</video>
0
Harish Varaliya

単にpreload="none"動画タグと動画のページは、ページの読み込み時に自動再生を停止します。

0
Dhaval Mistry

実際、autoplayをfalseに設定しても、一部のビデオが再生されることはありません。 このケースをフィドルで参照してください。

すべてのビデオを一時停止する場合は、次の行のコードを実行することをお勧めします。

videos = document.querySelectorAll("video"); 
for(video of videos) {
  video.pause(); 
}

もちろん、videoタグがシャドウルート要素内にある場合、上記のケースは機能しませんが、シャドウルート要素ではほとんど一般的なソリューションは機能しません。そこでカスタムアプローチが必要になり、最初にシャドウルートを展開します。

0
Eduard Florinescu