桌面查看不同的视频和移动查看不同的视频自动播放
Posted
技术标签:
【中文标题】桌面查看不同的视频和移动查看不同的视频自动播放【英文标题】：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 >
<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>
打开移动视图和桌面视图播放不同的视频并且都自动播放。
【问题讨论】：
【参考方案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 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。以上是关于桌面查看不同的视频和移动查看不同的视频自动播放的主要内容，如果未能解决你的问题，请参考以下文章
Qt推流程序自动生成网页远程查看实时视频流（视频文件/视频流/摄像头/桌面转成流媒体rtmp+hls+webrtc）