これは一日中私を殺していますが、ネイティブコントロールなしでhtml5ビデオプレーヤーを動作させる方法がわかりません。
まったくコントロールは必要ありませんが、含めない場合、ビデオを強制的に再生しようとする以下のJavaScriptを追加しても、ビデオは再生したくないようです。iPhoneや複数のブラウザーで機能します。しかし、奇妙なiPadではありませんか?
役立つ場合は、ここにマークアップがあります!
<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>
$('#video').click(function(){
document.getElementById('video').play();
});
iOSは、videoタグのautoplay
属性をサポートしていません。また、jQueryを使用してビデオ要素からのクリックイベントにバインドすることはできないように見えます( fiddle を参照)。
回避策は、非表示のdivをビデオ要素の上に配置し、ビデオを再生するクリックをそれにバインドすることです( fiddle を参照):
HTML:
<div id="video-overlay"></div>
<video id="video" width="400" height="300">
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
</video>
CSS:
#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999; }
jQuery:
$('#video-overlay').click(function(){
document.getElementById('video').play();
});
設計上、ビデオを自動再生することはできませんが、再生が開始された後にコントロールを削除するのは十分簡単です。
<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>
これを使った
<video id="video" controls=“true” width="300" height="250" poster="gray30x25.gif" autoplay onplaying="this.controls=false">
controls=“true”
-iPadで機能させる
autoplay
-モバイル以外では自動再生します
onplaying="this.controls=false"
-再生時にコントロールを削除します
それはラップトップで自動再生し、iPadで動作します!
ありがとうドイン
私ができる最善のことは、ユーザーが画面に触れてすぐにビデオを再生し、ページを下にスクロールすることです。
function playVideoNow(e)
{
document.getElementById('video').play();
document.removeEventListener('touchstart', playVideoNow);
}
document.addEventListener('touchstart', playVideoNow, false);
現在のところ、iOS 6は一部のデバイスでautoplay
要素をサポートしています。
参照用に http://www.longtailvideo.com/html5/autoloop/ を確認してください。