Html5标记视频无法在Chrome上运行

时间:2017-05-28 13:21:00

标签: javascript css html5 google-chrome html5-video

标记在firefox和IE资源管理器上工作正常,但在Chrome上无效。我有两种视频格式,mp4和webm。,

这是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/

提前感谢您的帮助

1 个答案:

答案 0 :(得分:1)

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

enter image description here