Ngăn video HTML5 tải xuống các tệp trên thiết bị di động - videojs

Question

Vì vậy, tôi hiện đang xây dựng trang web có băng chuyền chứa bốn video, mỗi video được kích hoạt để phát bằng cách gắn vào sự kiện slide.bs.carousel của băng chuyền Bootstrap 3.

Mỗi phòng trong số video được nhúng trong trang như vậy:

<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> 

Bây giờ, do các hạn chế đặc biệt của Apple trên tự động phát và nạp trước các video HTML5 (cả hai đều là người khuyết tật và tương tác người dùng được yêu cầu kích hoạt phát lại) Tôi đã quyết định bỏ qua các video cho điện thoại di động & chọn tham gia hình ảnh tĩnh thay thế. Điều này là tương đối đơn giản, vì tất cả những gì cần thiết để ngăn chặn video che phủ nội dung là truy vấn phương tiện truyền thông ẩn chúng.

Điều đó nói rằng, tôi thấy rất khó để ngăn video tải xuống và chi phí là lớn.

Ví dụ, tôi có một kịch bản để kiểm tra xem người dùng đang truy cập từ thiết bị di động, vì vậy, tôi đã cố gắng:

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]); 
     } 
    } 
} 

này loại bỏ thành công các yếu tố, nhưng điều này đã được được gọi trên DOMReady cũng có nghĩa là các tài nguyên đã bắt đầu tải xuống.

Làm cách nào để ngăn video tải trên thiết bị di động? Tôi muốn tìm một giải pháp sử dụng VideoJS vốn tốt nhất.

Answer 1

Dựa trên các đề xuất mà Ian vui lòng thực hiện, đây là giải pháp làm việc của tôi.

Thứ nhất, tôi đã thay đổi các yếu tố nguồn con mỗi video để có một thuộc tính data-src như vậy:

<video id="my-id">  
    <source data-src="somevideo.mp4"> 
</video> 

Sau đó, sau khi thực hiện kiểm tra điện thoại di động bằng cách sử dụng kịch bản có sẵn tại http://detectmobilebrowsers.com/ mà tôi sửa đổi để bao gồm iPad vv (related SO answer here) tôi chỉ đơn giản là sử dụng các kịch bản sau đây để tự động cập nhật các src thuộc tính của mỗi video (nếu chúng ta đang ở trên máy tính để bàn trong trường hợp của tôi):

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(); 

Và đó là nó! Không có gì tải trên thiết bị di động nữa và tôi có thể kiểm soát khá chi tiết trên các thiết bị mà nó sẽ hoặc sẽ không tải.

Hy vọng điều này sẽ giúp ai đó.

Answer 2

Một cách bạn có thể làm điều này là đặt thuộc tính src của phần tử video qua JavaScript và chỉ làm như vậy dựa trên truy vấn phương tiện (sử dụng matchMedia).

Điều này có nghĩa là phần lớn mã của bạn sẽ phải chuyển sang JavaScript.

Ví dụ, HTML của bạn có thể là một cái gì đó như:

<video data-mp4="video.mp4" data-webm="video.webm" class="video-js" controls></video> 

Và sau đó trong JavaScript (pseudo code ở đây, không thực tế 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(); 
    } 
} 

Something như thế có thể làm việc cho bạn , mặc dù bạn có thể phải chơi xung quanh một chút với nó.