HTML5: Theo cách thủ công "phát" video bên trong canvas, trong IOS Safari

Question

Vì vậy, đây là những gì tôi đang cố gắng làm: Tôi muốn tải video thành phần tử video nhưng không phát video đó trong "bình thường " đường. Sử dụng khoảng thời gian đã định thời gian, được tính theo tốc độ khung hình của phim, tôi muốn trên mỗi lần lặp lại đến

A. Tự tay chuyển video một 'khung' (hoặc càng gần càng tốt).
B. Vẽ khung đó thành canvas.

Qua đó có video "phát" bên trong canvas.

Dưới đây là một số mã:

<video width="400" height="224" id="mainVideo" src="urltovideo.mp4" type="video/mp4"></video> 
<canvas width="400" height="224" id="videoCanvas"></canvas> 

<script type="text/javascript"> 

var videoDom = document.querySelector("#mainVideo"); 
var videoCanvas = document.querySelector("#videoCanvas"); 
var videoCtx = null; 
var interval = null; 

videoDom.addEventListener('canplay',function() { 
    // The video's framerate is 24fps, so we should move one frame each 1000/24=41.66 ms 
    interval = setInterval(function() { doVideoCanvas(); }, 41.66); 
}); 

videoDom.addEventListener('loadeddata',function() { 
    videoCtx = videoCanvas.getContext('2d'); 
}); 

function doVideoCanvas() { 
    videoCtx.drawImage(videoDom,0,0); 
    //AFAIK and seen, currentTime is in seconds 
    videoDom.currentTime += 0.0416; 
} 

</script> 

này hoạt động hoàn hảo trong Google Chrome, nhưng nó không hoạt động trong Safari của một Iphone;
Khung hình video không được vẽ ở tất cả vào canvas.

Tôi chắc chắn rằng:

• Các sự kiện video tôi nối vào không được kích hoạt (đã làm 'cảnh báo' và họ đã được hiển thị).
• Tôi có quyền kiểm soát đối với canvas (đã thực hiện 'fillRect' và đã điền).

[Tôi cũng đã cố gắng xác định kích thước trong drawImage - nó đã không giúp đỡ]
là drawImage với một đối tượng video không được áp dụng tại tất cả trong Iphone Safari ...?

Thậm chí nếu tôi sẽ quản lý để tìm một cách để nắm bắt được khung hình video, cũng có một số vấn đề khác trong trình duyệt của Iphone:

• Truy cập vào currentTime tài sản của video chỉ được cấp khi video đã bắt đầu phát (theo cách tiêu chuẩn). Tôi nghĩ về cách nào đó có thể "chơi nó ẩn" và sau đó chụp, nhưng không quản lý để làm điều đó. Cũng nghĩ đến có thể bằng cách nào đó bắt đầu chơi video và sau đó ngay lập tức dừng nó;
  Dường như không có cách nào để bắt đầu chơi video một cách mạnh mẽ trong iOS Safari. video.play() hoặc autoplay dường như không làm gì cả. Chỉ khi người dùng chạm vào "vòng tròn phát" trên video thì video sẽ bắt đầu phát (chiếm tất cả trên màn hình, như thường với các video trên trình duyệt của iPhone).

• Khi video phát - số currentTime thuộc tính làm được chuyển tiếp. Trên chính video đó. Khi bạn tạm dừng video và quay lại trang html thông thường - bạn có thể thấy các khung hình trên phần tử video thay đổi. Mặc dù, trong một giai đoạn chậm (không giống như trong Google Chrome, nơi mà tỷ lệ có vẻ là đủ mịn để làm cho nó trông giống như nó đang chơi) - trong iphone nó có vẻ là một tỷ lệ của một cái gì đó giống như 2-3 khung hình mỗi giây có thể. Nó vẫn giữ nguyên ngay cả khi tôi thử thay đổi khoảng thời gian, tôi đoán có giới hạn thời gian tối thiểu mà trình duyệt trên iPhone có thể xử lý.

"Bonus câu hỏi" :) - Khi khung trên yếu tố video tiến triển từ sự kiện - vòng tròn "nút play" xuất hiện trên các yếu tố video (vì nó là không thực sự 'chơi').Có cách nào để giấu nó và làm cho nó vô hình?

Điều này đã được thử nghiệm trên iPhone 3GS (với cả 3G và Wifi) và Iphone 4, cả hai đều chạy IOS 5, cả hai đều có kết quả tương tự như mô tả.

Answer 1

Thật không may là tôi không có thiết bị iOS để kiểm tra điều này, nhưng tôi không nghĩ bạn cần chụp các khung hình video theo cách bạn đang cố sử dụng thuộc tính currentTime. Quá trình bình thường trông giống như sau:

1. tạo ra một yếu tố video mà không cần điều khiển (bỏ qua các thuộc tính controls)
2. ẩn các yếu tố
3. khi video đang phát vẽ nó vào khung trên một khoảng thời gian

Như bạn đã phát hiện, thiết bị iOS không hỗ trợ tự động phát trên video HTML5 (hoặc âm thanh thực sự) nhưng bạn có thể tạo điều khiển riêng để bắt đầu phát lại video bằng phương pháp play().

Cách tiếp cận này sẽ giải quyết được vấn đề bạn đang gặp phải khi nút phát hiển thị vì trong trường hợp này bạn thực sự đang phát video.