[英]MP4 doesn't play after initial load in Safari
I have embedded a mp4 file in my webpage, that gets loaded fine and is playable by every browser and on mobile too. 我在网页中嵌入了一个mp4文件 ,该文件可以很好地加载,并且可以在每个浏览器和移动设备上播放。
<video controls src="/mymovie.mp4">
<track kind="captions"></track>
</video>
However, when I open the webpage with Safari (macOS), the only thing I can see is a black box with the size of the video and a striked through (disabled) play button in front of it. 但是,当我使用Safari(macOS)打开网页时,我唯一能看到的是一个黑匣子,上面有视频的大小,并且视频前面有一个删除线(禁用)播放按钮。 The thing is, when I refresh the page again (even without clearing the cache) the video works fine.
问题是,当我再次刷新页面(即使不清除缓存)时,视频也可以正常工作。
When I write my markup to use the source
element, the problem appears, but in a different way. 当我编写标记以使用
source
元素时,出现了问题,但是方式不同。 Now I see no longer a black box, but a transparent one and I can press the play button, but the video won't start. 现在,我不再看到一个黑匣子,而是一个透明的匣子,可以按播放按钮,但是视频无法开始播放。 I already tried to place a " not supported " text under the
source
list, but the text doesn't appear. 我已经尝试在
source
列表下放置一个“ 不受支持 ”的文本,但是该文本没有出现。
<video controls>
<track kind="captions"></track>
<source src="/mymovie.mp4" type="video/mp4"></source>
not supported
</video>
Notice that I already tried reordering the source
element above the track
element. 请注意,我已经尝试过对
track
元素上方的source
元素重新排序。
Is there any known problem of this kind and a way to solve it? 是否存在此类已知问题以及解决方案?
Here are some more informations about my setup: 以下是有关我的设置的更多信息:
accept-ranges: bytes
Content-Range: bytes 262144-3411398/3411399
content-type: video/mp4
Something I notice in difference to Chrome is, that inside my devtools network tab the video source is loaded between 2 and 4 times, but just one time of it with the correct size. 我注意到与Chrome的不同之处在于,在我的devtools网络标签中,视频源的加载时间是2到4次,但只有正确大小的视频被加载了一次。 The other two entries are just some bytes.
其他两个条目只是一些字节。 However, this happens in the same way, if I face the black box.
但是,如果我面对黑匣子,也会以相同的方式发生。
<video controls autoplay>
<source src="/mymovie.mp4" type="video/mp4">
<track kind="captions"></track>
</video>
Did you try using source
tag instead? 您是否尝试使用
source
代码标记? Autoplay
attribute can also help, but some browsers do not allow videos to be autoplayed, or autoplay all videos as muted, if user didn't interract with document first . Autoplay
属性也可以提供帮助,但是如果用户未首先与文档打交道,则某些浏览器不允许自动播放视频或将所有视频静音播放 。 My best guess is that Safari doesn't allow to play a video without the prior interaction, and you refreshing the page do interact with the page. 我最好的猜测是,Safari不允许在没有事先交互的情况下播放视频,并且刷新页面后确实会与页面进行交互。 You can cheat it playing video after clicking on privacy policy accept button.
单击隐私策略接受按钮后,您可以在播放视频时作弊 。
// jQuery
$('#button-id').click(function(){ $('#video-id').play(); });
// Javascript
var button = document.getElementById('button-id');
var video = document.getElementById('video-id');
button.addEventListener('click', function(){ video.play(); });
If your video is in the same folder you should use: 如果您的视频位于同一文件夹中,则应使用:
<video controls autoplay>
<source src="mymovie.mp4" type="video/mp4">
<track kind="captions"></track>
your browser doesn't support HTML5 video
</video>
or 要么
<video controls autoplay>
<source src="./mymovie.mp4" type="video/mp4">
<track kind="captions"></track>
your browser doesn't support HTML5 video
</video>
You could also include your whole url: 您还可以包括整个网址:
<video controls autoplay>
<source src="http://url.to/mymovie.mp4" type="video/mp4">
<track kind="captions"></track>
your browser doesn't support HTML5 video
</video>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.