Html5标签视频在Chrome上不起作用

问题描述：

标签在Firefox和IE浏览器中正常工作，但无法在Chrome上使用。我有两个视频格式，MP4和WebM，Html5标签视频在Chrome上不起作用

下面是HTML

<video playsinline autoplay muted loop poster="8.jpg" id="bgvid"> 

    <source src="8.mp4" type="video/mp4"> 
    <source src="8.webm" type="video/webm"> 

</video>

而且我的CSS

video#bgvid { 
position: fixed; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
z-index: -100; 
-ms-transform: translateX(-50%) translateY(-50%); 
-moz-transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
transform: translateX(-50%) translateY(-50%); 
background: url(8.jpg) no-repeat; 
background-size: cover; 
}

如果你想看到一个真人版，你可以在这里找到。

https://neevasoft.com/icedrink2/

在此先感谢您的帮助

“未找到” 8.JPG可能是原因。 – Pyromonk

您的网站加载了视频，但由于该海报没有显示。海报在您的网站中缺失。请通过移除海报来检查它。 – AdhershMNair

我不认为失踪的海报是问题所在。在codepen上运行良好，海报404'https://codepen.io/mcoker/pen/JNqyLK –

答

源文件链接不工作。如果您使用上述url作为src属性，则需要将视频放在index.html文件的同一级别，并且在文件结构中没有任何视频位于此级别。或者将它们放置在其中一个文件夹中并相应地更改src URL。

保罗

你指的是什么锚链接，以及它们与视频不起作用有什么关系？你能为OP提供一个代码解决方案吗？ –

他的视频源是，但是在他的文件结构中没有这个位置的视频文件？这肯定是问题吗？ –

视频在那里，但不在源处显示。 https://neevasoft.com/icedrink2/video/8a.mp4 - 你可以在那里看到它们。和https://neevasoft.com/icedrink2/video/8.webm –

Html5标签视频在Chrome上不起作用

相关推荐