更改移动设备的HTML5视频源

应该是一个容易回答的人希望,我正在制作的网站有我不想在手机上加载的视频 .

想知道是否有办法将小于800px宽度的屏幕的每个视频的来源更改为1kb的视频,但在桌面上它会播放完整的视频,

我不打算降低移动用户的质量,移动用户根本不会看到视频,因为它们被图像替换以节省数据 . 我想阻止视频在移动用户的后台加载,因为我不希望他们下载未包含在他们的网站版本中的视频,如果我无法阻止它们加载到800px以下那么是否有可能用1kbvideo替换该断点处的源作为一种保存移动数据的黑客攻击 .

<video autoplay loop id="video-background" muted plays-inline>
<source src="VIDEO/BG-VID.mp4" type="video/mp4"> 
<source src="VIDEO/1kb-vid.mp4" type="video/mp4"> 
</video>

回答(2)

2 years ago

这个javascript似乎是我想要的,

$(document).ready(function(){
var screenWidth = $(window).width();
if (screenWidth < 800){
    $('video').removeAttr('autoplay');
} else {
$('video').attr('autoplay');
}
});

2 years ago

移动用户可以轻松显示全高清视频,它只是设置为400px(或其他)的断点 . 这并不意味着它们没有HD分辨率,事实上许多移动设备具有更高的分辨率 . Youtube,Netflix,他们都在移动设备上加载高清 .

不再支持源标记中的媒体查询,这只能在几年前实现 .

人们不希望在移动设备上看到分辨率较低的视频,他们希望看到全分辨率视频(如果他们的带宽允许)

这就是为什么实现这一点的唯一方法与Netflix或Youtube实现此类事情的方式相同:动态地将具有不同大小的视频发送到不同的带宽 . 这意味着它们在播放期间会发生变化,因此无法以固定的方式对其进行定义 .

您的问题解决方案是MPEG-Dash,这需要在服务器上进行一些工作,还需要对视频进行特定编码 . 由于这是一个非常大的主题,我只会链接one (good?) tutorial,但如果您搜索MPEG-Dash,您可以找到更多信息 .