Safari忽略视频标记中的源子标记

时间:2017-09-07 17:19:41

标签: html safari html5-video

以下内容不适用于Safari 10.1

HTML

   <div class=" ">
      <video controls preload style="display: block; width: 90%;  height: auto;  margin: auto;" poster="/media/preview.png">
  <source src="media/source1.mp4" type="video/mp4">
  <source src="media/source2.mp4" type="video/mp4">
  <source src="media/source3.webm" type="video/webm">
  Your browser does not support the <code>video</code> element.
</video>    

该视频无法在Safari 10.1,Firefox和Chrome中播放,但确实如此。

此外,在Safari中的元素信息中,似乎无法识别source标记。它根本不会出现。但是,我可以下载视频(它下载了第一个mp4版本)。下载的文件可以由Safari打开并播放。

任何帮助?

谢谢!

1 个答案:

答案 0 :(得分:0)

我试过这个,这似乎适用于Safari Version 10.1.1(12603.2.4) 请检查是否有任何课程没有覆盖播放器的高度或任何插件阻止视频播放。

<div class="">
  <video controls preload style="display: block; width: 90%;  height: auto;  margin: auto;">
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element.
  </video>
</div>