css 基于移动的或桌面加载不同视频

bqjvbblv 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(114)

我试图加载一个不同的视频的基础上是否用户是在桌面（横向）或移动的（纵向）。URL是www.bubina.com如果你在移动的上加载这个，它只会加载视频的一面，但在桌面上就可以了。我有一个单独的，肖像版本的视频，我需要加载的移动的。我一直在尝试解决这个问题，我在网上找到了一些修复方法：var javascript调用不同的视频，使用媒体标签等，但我就是不能让它工作。我会很感激任何帮助。
你可以看看我在做什么：

<style>
var mainVideo = $('video#LoadVideo');
var mobileSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4";
var desktopSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4";
 
if ($(window).width() < 980) {
     mainVideo.append("<source type='video/mp4' src='"https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4"'/>");
} else {
     mainVideo.append("<source type='video/mp4' src='"https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4"'/>");
}
</style>
</head>
<body>
<video id="LoadVideo">
</video>
</body>

我也试过这个：

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo"> 
<source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4" media="only screen and (min-device-width: 1080px)"></source> 
<source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4" media="only screen and (max-device-width: 1080px)"></source> 
</video>
</body>

先谢谢你了。
我试图让不同的视频加载在桌面和移动的，但同一个是加载在每个设备上。
有这个问题/答案：How to play 2 different videos based on screen size?
但答案如下：

if (window.innerWidth > 425) {
    // display video for desktop
} else {
    // display video for mobile
}

我不明白该把什么放在“桌面显示视频”和“移动的显示视频”的地方。什么样的代码在那里？视频的URL在哪里？我需要更多的解释-我真的很有限的javascript知识，但我知道CSS和HTML。

css

来源：https://stackoverflow.com/questions/76142819/loading-different-videos-based-on-mobile-or-desktop

2条答案

按热度按时间

2hh7jdfx1#

你的代码有几个问题：
1.你有一些简单的错别字。首先，JavaScript代码放在<script>标签中，而不是<style>标签中。此外，您还混淆了用于字符串和HTML属性的引号。您也没有包含jQuery的<script>标记。我已经修复了下面的这些错别字。
1.您可能需要使用< 425来检查较小的屏幕。980像素太大了。
1.添加一个完整的<source>元素没有多大意义，只需预先创建一个并更改src属性即可。

var videoSrc = $('#LoadVideo');

if ($(window).width() < 425) {
     videoSrc.attr('src', 'https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4');
} else {
     videoSrc.attr('src', 'https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video>
  <source type="video/mp4" id="LoadVideo"/>
</video>

赞(0）回复(0）举报 2023-05-02

pbwdgjma2#

使用Jquery控制要在视频部件中加载的内容
为了更好的用户体验

在页面首次加载时执行此操作
当用户调整窗口大小时执行

所以代码是

<script
  src="https://code.jquery.com/jquery-3.6.4.js"
  integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
  crossorigin="anonymous"></script>

<html>
<body>
TEST<br>
<video id=vid style="width:100%;height:auto;" controls autoplay></video>
TEST2<br>
</body>
</html>

<script>

function loadvideo() {
var mobileSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4";
var desktopSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4";
 
   if (window.innerWidth > 630){
       $("#vid").attr("src",desktopSrc);
    }else{
       $("#vid").attr("src",mobileSrc);
    }
}

  window.addEventListener("resize", loadvideo);
  window.onload=loadvideo; 

</script>

赞(0）回复(0）举报 2023-05-02

我来回答

css 基于移动的或桌面加载不同视频

2条答案

相关问题

热门标签

最新问答