IOS はビデオの自動読み込みを防止するため、再生ボタンを示す「ポスター」画像を追加する必要があります (この場合)。
ただし、読み込みが開始されたときにポスター画像を読み込み中の画像に交換することにより、接続が遅い場合の読み込み中の画像も表示したいと思います。
問題は、ロード画像の前に再生ボタンが一瞬表示される通常の接続にあります。
では、再生ボタンが押されるまでロードが行われないことが検出されたときに、再生ポスター画像を表示するにはどうすればよいですか。
IOS はビデオの自動読み込みを防止するため、再生ボタンを示す「ポスター」画像を追加する必要があります (この場合)。
ただし、読み込みが開始されたときにポスター画像を読み込み中の画像に交換することにより、接続が遅い場合の読み込み中の画像も表示したいと思います。
問題は、ロード画像の前に再生ボタンが一瞬表示される通常の接続にあります。
では、再生ボタンが押されるまでロードが行われないことが検出されたときに、再生ポスター画像を表示するにはどうすればよいですか。
最初に networkState と readyState の 2 つを確認する必要があります。さらに、preload 属性の値が「none」以外であるか、autoplay 属性を使用していることを確認する必要があります。この場合、次のコードを記述できます (window.onload まで待機することをお勧めします)。
$(window).on('load', function(){
var myVideo = $('video');
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//no automatically loading code
myVideo.prop('poster', 'noloading.jpg');
}
});
これはテストされていません。readyState == 0 はデータがないことを意味し、networkState 2 はロードを試行しないことを意味します。
タイムアウトあり:
$(window).on('load', function(){
var myVideo = $('video');
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//probably no automatically loading code
setTimeout(function(){
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//no automatically loading code
myVideo.prop('poster', 'noloading.jpg');
}
}, 1000);
}
});