Question

我发现的所有解决方案都没有让我更进一步，所以我希望你能在这个问题上帮助我。

我在一个简单的网站中嵌入了HTML5视频。它在一些Safari版本（例如8.0）中运行良好，声音播放，但没有显示图像。有时，在调整浏览器窗口大小后，视频会显示出来。

我有3个全屏div，通过javascript在scpecific事件上显示。

第一个div“introScreen”显示在页面加载
点击“videoScreen”，点击
视频播放完成后第三个div显示

除了野生动物园的虫子外，我都在工作。以下是该网站的链接：www.whereintimeisnewman.com/temp_index.php

以下是显示和播放视频的功能：

function playVideo(){

    document.getElementById("introScreen").style.display = "none";
    document.getElementById("videoScreen").style.display = "block";

    video.play();
    video.addEventListener('ended',function(){      
        changeToRegistration();
    });
}

也许它与css显示设置有关，但我怎么能解决这个问题呢？

非常感谢您对此进行调查！

Answer 1

解决方案：

我设法解决了这个问题。显然Safari存在视频问题和“display：none”样式属性。

父div“videoScreen”的css-attribute display：none，脚本变为display：block，用于启动视频。

document.getElementById("videoScreen").style.display = "block";
video.play();

当禁用css表中的行时，视频已加载。即使div现在从头开始显示，视频和海报图像只会在播放视频后显示。

也许这个解决方案可以帮助别人...

HTML视频没有图像，只是声音

1 个答案: