定义海报属性和预加载时视频消失 [英] 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屋！