桌面查看不同的视频和移动查看不同的视频自动播放答案

【问题标题】：Desktop View Diffrent Video And Mobile View Diffrent Video With Auto Play桌面查看不同的视频和移动查看不同的视频自动播放
【发布时间】：2020-12-18 09:28:53
【问题描述】：

帮帮我...我会尝试将视频放在桌面屏幕上，并且此视频的宽度和高度为 100%。任何用户通过桌面访问我们的网站以观看此视频。

但在移动视图上打开此页面以更改视频。在移动端查看不同的视频播放。

**双屏视频自动播放**

请帮我解决这个问题。

**this is my code..**

<html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

打开移动视图和桌面视图播放不同的视频并且都自动播放。

【问题讨论】：

标签： html css

【解决方案1】：

通过提供separate class

在移动和桌面中播放视频

喜欢..

<video class="desktop" controls autoplay>
  <source src="Fumefx colored smoke.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video class="mobile" controls autoplay>
  <source src="mobile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

给我们css隐藏广告鞋...

.desktop{
    width:100%;
    height:100vh;
    display:block;
}
.mobile{
    display:none;
}
@media only screen and (max-width: 600px) {
    .desktop{
        display:none;
    }
    .mobile{
        width:100%;
        height:100vh;
        display:block;
    }
}

【讨论】：

【解决方案2】：

对于自动播放视频，在视频标签上添加 "autoplay" 属性。

在桌面和移动设备上使用不同的视频。对不同的源文件使用不同的视频标签，并使用媒体查询或java脚本来隐藏和显示

<html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%" autoplay>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

【讨论】：

仅通过视图设计的 HTML 和 CSS。不使用 javascript。