阻止HTML5视频在手机上下载文件-videojs
Prevent HTML5 videos from downloading the files on mobile - videojs
所以我目前正在构建一个网站,该网站有一个包含四个视频的旋转木马,每个视频都通过连接Bootstrap 3旋转木马的slide.bs.carousel
事件来触发播放。
每个视频都嵌入在页面中,如下所示:
<video id="somevideo" class="video-js vjs-default-skin m-hide" controls preload="auto" data-setup='{ "controls": false, "autoplay": false, "preload": "auto" }'>
<source src="somevideo.mp4">
<source src="somevideo.webmhd.webm">
</video>
现在,考虑到苹果特别对HTML5视频的自动播放和预加载施加的限制(两者都被禁用,并且需要用户交互才能触发播放),我决定省略移动&选择静态图像。这相对简单,因为阻止视频覆盖内容所需要的只是隐藏它们的媒体查询。
也就是说,我发现很难阻止视频被下载,而且开销非常大。
例如,我有一个脚本来检查用户当前是否正在从移动设备访问,因此,我尝试过:
var check = false;
window.mobilecheck = function() {
// Check for mobile here
if (check === true) {
// Device is mobile
var videos = document.querySelectorAll('.video-js');
for (var i = 0; i < videos.length; i++) {
// videojs(videos[i]).destroy();
videos[i].parentNode.removeChild(videos[i]);
}
}
}
这成功地删除了元素,但这必须在DOMReady上调用,这也意味着资源已经开始下载。
如何停止在手机上加载视频我想找到一个最好使用VideoJS的解决方案。
根据Ian的建议,这是我的工作解决方案。
首先,我将每个视频的子源元素更改为具有属性data-src
,如下所示:
<video id="my-id">
<source data-src="somevideo.mp4">
</video>
然后,在使用上提供的脚本执行移动检查后http://detectmobilebrowsers.com/我修改了它,将其包括iPad等(此处为相关SO答案)。我只是使用以下脚本自动更新每个视频的src
属性(如果我们在桌面上):
var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();
就这样!移动设备上不再加载任何内容,我可以对它将加载或不加载的设备进行相当精细的控制。
希望这能帮助到别人。
实现这一点的一种方法是通过JavaScript设置video
元素的src
属性,并且仅基于媒体查询(使用matchMedia
)进行设置。
这意味着大部分代码将不得不转移到JavaScript。
例如,您的HTML可能类似于:
<video data-mp4="video.mp4" data-webm="video.webm" class="video-js" controls></video>
然后在您的JavaScript中(这里是伪代码,而不是实际的JS):
if (window.matchMedia("(min-width: 640px)").matches) {
// do nothing
} else {
var videos = document.querySelectorAll('.video-js'),
videoFile;
for (var i = 0; i < videos.length; i++) {
// Choose video type
if (video[i].canPlayType("video/mp4") === "probably") {
videoFile = video[i].getAttribute("data-mp4");
}
// do the same check for WebM here...
video[i].src = videoFile;
// Call whatever reload or refresh method video.js has
// for example...
video[i].refresh();
}
}
这样的东西可能对你有用,尽管你可能需要玩一玩。
根据Ian和GDGR的回答,我将其修改为适用于多个视频。
<video class="mobile-no-load">
<source data-src="somevideo.mp4">
</video>
if (window.innerWidth > 730) {
// get multiple videos
var sources = document.querySelectorAll('video.mobile-no-load');
// loop through the videos
sources && sources.forEach(function(source){
// target the src attribute of the <source> element and set it to the data-src attribute
source.childNodes[1].setAttribute('src', source.childNodes[1].getAttribute('data-src'))
});
}
- 如何在生成下载文件时显示加载动画
- 直接下载文件,而不是从window.open(url)
- Javascript运行php文件,然后下载文件
- 在单击href链接的同时下载文件
- 通过javascript下载文件时设置文件名
- HTML锚标记无法在android平台中下载文件
- 链接/按钮从子文件夹下载文件--浏览器只是浏览
- iPhone强制下载文件
- 正在下载文件,同时加载另一个页面
- 如何在node.js中只下载文件的前10 KB
- 如何使用XMLHttpRequest下载文件
- 使用angular js在前端下载文件
- 使用blob从ajax结果下载文件
- 通过Android Chrome浏览器下载文件
- 使用AJAX下载文件.来自SD卡
- 如何使用phonegap从android中的URL下载文件
- 使用ajax下载文件
- 无法使用Angular JS和spring MVC打开下载文件
- 无法使用API-node.js从Google Drive下载文件
- 点击jQuery按钮下载文件