HTML5视频中的加载程序无法在Safari中运行

时间:2017-02-20 10:13:47

标签: jquery html css safari

我在使用preloader加载视频时尝试添加jquery。问题是它在除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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

首先,video - 元素没有#video_id - id。其次,您正在使用带有装载程序的海报,这意味着如果占位符显示在其上方,则不会看到背景图像。我在野生动物园看到装载海报。

我在视频中使用正确的ID更新了代码。

&#13;
&#13;
 $('#video_id').on('loadstart', function(event) {
   $(this).addClass('loading');
 });
 $('#video_id').on('canplay', function(event) {
   $(this).removeClass('loading');
   $(this).attr('poster', '');
 });
&#13;
video.loading {
  background: black url(http://www.drivethrurpg.com/shared_images/ajax-loader.gif) center center no-repeat;
}
&#13;
<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>
&#13;
&#13;
&#13;