我正在尝试在使用 jquery
加载视频时添加一个 preloader
。问题是它在除 Safari
之外的所有浏览器中都有效>.
这是代码。
$('#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>
最佳答案
首先,video
-元素没有#video_id
-id。其次,您使用带有加载器的海报,这意味着如果占位符显示在其上方,则不会看到背景图像。我在 safari 中看到加载海报。
我用视频上的正确 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>
关于jquery - HTML5 视频中的加载器在 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42341760/