Question

我正在尝试构建在滚动时更改的响应式视频。它在浏览器中正常工作，但没有显示给设备。我的代码在下面..

<html>..<article data-l-nougat class="nougat">
    <video id="eleVideo" class="videos" autoplay loop style="display:block;">
        <source src="vid/01.mp4" type="video/mp4">
    </video>
    <video id="eleVideo2" class="videos" autoplay loop style="display:none;">
        <source src="vid/02.mp4" type="video/mp4">
    </video>
    <video id="eleVideo3" class="videos" autoplay loop style="display:none;">
        <source src="vid/03.mp4" type="video/mp4">
    </video>

我的css如下：

.videos {
    width:100%;
    position:fixed;
}

并且在所有浏览器中它都能正常工作，但无法在设备中使用。

Answer 1

在提问之前最好先搜索一下。

你可以在这里找到CSS技巧：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 2

您从 .videos 类中移除位置：已修复或更新如下：

.videos {
width:100%;
position:fixed;
left:0;
top:0;
right:0;

}

请查看随附的代码段。

.videos {
    width:100%;
    position:fixed;
	left:0;
	top:0;
	right:0;
}

<!DOCTYPE html>
<html>
<body>

<video  controls autoplay loop class="videos" style="display:block;">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body>
</html>

视频在设备中无法响应

2 个答案: