Nền video HTML5 trên iPad/iphone

Question

Tôi đã sử dụng this solution để sử dụng video html5 làm nền của trang web của tôi.

Tuy nhiên, nó dường như không hoạt động trên iPad/iphone, tất cả những gì tôi nhận được là một màn hình màu đen và video không thay đổi kích thước.

Ngoài ra, video không thay đổi kích thước chính xác khi tỷ lệ co của cửa sổ không giống như tỷ lệ khung hình của video. Bạn sẽ thấy hình nền bắt đầu hiển thị.

Cảm ơn!

Answer 1

Thật không may, iPad không hỗ trợ phát video tự động, vì vậy bạn cần có nút phát/dừng/tạm dừng. Dưới đây là ví dụ về điều gì đó hoạt động trên iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

Answer 2

SquareSpace sử dụng cách tiếp cận thú vị để "mô phỏng" video trên trang web của họ bằng cách sử dụng vòng lặp thông minh .png và lớp phủ. Xem http://www.squarespace.com/

Nếu bạn sift thông qua mã HTML bạn sẽ tìm thấy chuỗi tay ở đây: http://cf.squarespace.com/details/musician-hand-sequence-hires.png

Nó hoạt động trên điện thoại .. Chỉ cần một cái gì đó để suy nghĩ về.

Answer 3

Cách duy nhất để tự động phát video trên thiết bị di động là bỏ qua thẻ video html.

tôi thấy ba tùy chọn, giả sử bạn không cần âm thanh:

• Sử dụng một gif thay cho video. Tùy thuộc vào hoạt ảnh, kích thước tệp sẽ tăng vọt mặc dù
• Sử dụng jpg hoặc png thực sự dài chứa mọi khung hình của video và sau đó chuyển qua chúng bằng javascript
• Giải mã video bằng javascript. Ví dụ: use this h.264 decoder and play videos with good compression. Nhược điểm duy nhất tôi thấy là nó đòi hỏi khá một số CPU để giải mã.

Tôi đã tìm giải pháp cuối cùng và nó hoạt động tốt.

Answer 4

Tôi đã stumbled khi một cái gì đó có thể giúp bạn với nhiệm vụ này ..

http://vagnervjs.github.io/frame-player/

của một cầu thủ JS mà nhận được một danh sách JSON hình ảnh đại diện cho khung của video.

này cũng sẽ cung cấp sự linh hoạt liên quan đến lựa chọn phong cách của chính bản thân video và đáp ứng ..

• Bạn có thể tải một bộ khác nhau của hình ảnh (thấp hơn về chất lượng) để suuport iPad vs hỗ trợ máy tính để bàn ví dụ .

Answer 5

Cách dễ nhất nhất tôi nghĩ, chỉ cần sử dụng gif cho nền. Ví dụ: bạn có thể chuyển đổi trực tuyến như trong http://ezgif.com/video-to-gif

Answer 6

Trong http://www.develooping.com/canvas-video-player/ bạn có thể xem nền mp4 đáp ứng hoạt động trong iPad/iPhone. Tải xuống mã từ http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip.Nó sử dụng một phiên bản thích nghi của HTML canvas video player script by Stanko;

<div class="video-responsive"> 
    <video class="video" muted="muted" loop="loop" autoplay="autoplay"> 
    <source src="mY_movie.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 

<canvas class="canvas"></canvas>   

<div id="over_video">Look at me</div> 
</div> 

Các kịch bản được sử dụng như sau

<script src="canvas-video-player.js"></script> 
<script> 

var isIOS = /iPad|iPhone|iPod/.test(navigator.platform); 

if (isIOS) { 

    var canvasVideo = new CanvasVideoPlayer({ 
     videoSelector: '.video', 
     canvasSelector: '.canvas', 
     timelineSelector: false, 
     autoplay: true, 
     makeLoop: true, 
     pauseOnClick: false, 
     audio: false 
    }); 

}else { 

    // Use HTML5 video 
    document.querySelectorAll('.canvas')[0].style.display = 'none'; 

} 

</script> 

CSS là

body { 
background: #000; 
padding:0; 
margin:0; 
} 
.video-responsive { 
padding-bottom: 56.25%; 
position: relative; 
width: 100%; 
} 

.canvas, 
.video { 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
background: #000; 
z-index: 5; 
} 
#over_video{ 
position: absolute; 
width: 100%; 
height: 100%; 
text-align: center; 
top: 0; 
z-index: 10; 
font-size: 12vw; 
color: #FFF; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
margin-top: 20%; 
text-shadow: 4px 4px 4px #5C433B; 
} 

Hy vọng nó có thể giúp.

Answer 7

Chỉ cần đánh dấu là bản ghi. Ngày nay, khả năng của video nền được hỗ trợ (iOS 10 +) do các chính sách mới của WebKit.

Để cụ thể, hãy xem tài liệu chính thức bên dưới. https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 8

Kể từ iOS10 có một giải pháp, xem tại đây: https://webkit.org/blog/6784/new-video-policies-for-ios/

Trên iPhone, <video playsinline> yếu tố bây giờ sẽ được phép chơi inline, và sẽ không tự động chuyển sang chế độ toàn màn hình khi phát lại bắt đầu. <video> các thành phần không có thuộc tính playinline sẽ tiếp tục yêu cầu chế độ toàn màn hình để phát lại trên iPhone. Khi thoát chế độ toàn màn hình bằng cử chỉ chụm, <video> các yếu tố không có playsinline sẽ tiếp tục phát nội dòng.