定义海报属性和预加载时视频消失 [英] video disappears when poster attribute and preload is defined
问题描述
我有一个具有以下属性的视频标签:
I have a video-tag with the following attributes:
<video width="xx" height="xx" poster="image.jpg" preload="auto">
我需要展示海报图片,并且希望预加载视频.
我不显示浏览器的控件,而是使用自定义控件(CSS 和 Javascript)手动控制视频.视频应该在我点击它时开始.
I need the poster-image to show and I want the video to preload.
I don't show the browser's controls but control the video manually with custom controls (CSS & Javascript). The video is supposed to start when I click on it.
在 Firefox 中,这按预期工作:我单击海报图像并开始播放视频.我点击视频,视频停止.
In Firefox this works as intended: I click on the poster-image and the video starts. I click on the video, the video stops.
在当前的 webkit 浏览器(Safari 6.0.2、Chrome 23.0.1271.64)上,但这不起作用:
一旦我点击海报图片,视频就会变得不可见,留下一个空白(白色)框.我听到声音,但可以看到视频.当我点击那个框时,声音停止了.
On current webkit-browsers (Safari 6.0.2, Chrome 23.0.1271.64) however this does not work:
As soon as I click on the poster image the video becomes invisible, leaving me with a blank (white) box. I hear the sound but can see the video. When I click on that box, the sound stops.
如果我设置 preload="none"
或 离开海报图像,这将再次在 webkit-browsers 中工作.
If I set either preload="none"
or leave the poster-image, this works in webkit-browsers again.
是否有任何已知的解决方法?
Is there any known workaround for this?
推荐答案
我遇到了类似的问题.现在在 Safari 中似乎没问题,但 Chrome 27 仍然行为不端.这是我正在使用的解决方案(从这个问题的已接受答案中借用:不使用控件时,Chrome 中的视频元素会消失).
I had a similar issue. It seems to be okay in Safari now, but Chrome 27 is still misbehaving. This is a solution that I am using (borrowed from the accepted answer to this question: Video element disappears in Chrome when not using controls).
JS
$(document).ready(function(){
$("#video").on('play',function(){
if (this.getAttribute('controls') !== 'true') {
this.setAttribute('controls', 'true');
}
this.removeAttribute('controls');
});
});
HTML
<video id="video" preload="auto" loop="loop" autoplay="autoplay" poster="picture.png">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Your browser sucks.
</video>
其中picture.png"是您的海报图片,video.mp4"和video.webm"是您的视频.
Where "picture.png" is your poster image and "video.mp4" and "video.webm" are your videos.
这是一个有效的 js 小提琴:http://jsfiddle.net/2n5Yj/1/
Here is a working js fiddle: http://jsfiddle.net/2n5Yj/1/
这篇关于定义海报属性和预加载时视频消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!