HTML5ビデオのローダーがSafariで動作しない

Question

jqueryを使用してビデオをロードするときにpreloaderを追加しようとしています。問題は、ブラウザがSafari以外のすべてのブラウザで機能していることです。ここで

JSFIDDLE

コードです。

$('#video_id').on('loadstart', function(event) { 
 
    $(this).addClass('loading'); 
 
}); 
 
$('#video_id').on('canplay', function(event) { 
 
    $(this).removeClass('loading'); 
 
    $(this).attr('poster', ''); 
 
});

video.loading { 
 
    background: black url(http://www.drivethrurpg.com/shared_images/ajax-loader.gif) center center no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video controls="" poster="http://www.drivethrurpg.com/shared_images/ajax-loader.gif"> 
 
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
 

 
</video>

Answer 1

まず、video -element doesntの#video_id -idを持っています。第2に、ローダー付きのポスターを使用しています。つまり、プレースホルダがその上に表示されていると、背景イメージが表示されません。私はサファリの装填ポスターを見る。

ビデオ上の正しいIDでコードを更新しました。

$('#video_id').on('loadstart', function(event) { 
 
    $(this).addClass('loading'); 
 
}); 
 
$('#video_id').on('canplay', function(event) { 
 
    $(this).removeClass('loading'); 
 
    $(this).attr('poster', ''); 
 
});

video.loading { 
 
    background: black url(http://www.drivethrurpg.com/shared_images/ajax-loader.gif) center center no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="video_id" controls="" poster="http://www.drivethrurpg.com/shared_images/ajax-loader.gif"> 
 
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
 

 
</video>