2015-09-29 27 views
10

gì tôi muốn đạt được:Trích xuất một phần của video bằng video html5. các vấn đề toàn màn hình trên iphone/ipad

Tôi có một dự án mà tôi hy vọng sẽ thực hiện những gì nho đã thực hiện trong ứng dụng của họ. Dự án của tôi sẽ là một trang web bình thường.

Đây là một ảnh chụp màn hình của những gì tôi thường muốn:

enter image description here

Nó phải là có thể cho một người sử dụng để quay video, chụp bộ phận của nó và tải nó lên trang web của tôi. Âm thanh cũng phải là một phần của video.

Cho đến bây giờ, tôi đã tạo một thanh trượt vòng quanh khu vực đã chọn. Mã hiện tại \ nguyên mẫu có thể được thấy ở đây: http://smn-vlp.azurewebsites.net/ Cẩn thận: Có âm thanh.

Hiện tại chỉ được thực hiện với javascript và phần tử dom video.

Sự cố: Iphone sử dụng video toàn màn hình bất kể tôi làm gì với phần được chọn. Trên các thiết bị khác có vẻ như nó hoạt động tốt.

Giải pháp có thể có: Tôi đã thử sử dụng canvas để phát video, nhưng để thực sự tải hình ảnh lên canvas, video gốc phải .play(). Điều này kích hoạt chế độ toàn màn hình từ safari một lần nữa. Sau đó, tôi đã nghĩ về việc thiết lập currentTime = + 1 và nhận khung hình cho canvas mà không thực sự phát video. Nhưng, tôi có thể lưu các hình ảnh được vẽ trong một mảng để tạo thành một video sau đó không?

Tôi phải làm gì với âm thanh nếu tôi tạo video từ hình ảnh canvas? Điều này có hiệu quả không?

function CaptureAudio() { 
    var audioContext = new webkitAudioContext(); 
    var gainNode = audioContext.createGain(); 
    gainNode.gain.value = 1;     // Change Gain Value to test 
    filter = audioContext.createBiquadFilter(); 
    filter.type = 2;       // Change Filter type to test 
    filter.frequency.value = 5040;   // Change frequency to test 

    var source = audioContext.createMediaElementSource(video); 
    source.connect(gainNode); 
    gainNode.connect(filter); 
    filter.connect(audioContext.destination); 
    console.log(source); 
} 

Nếu vậy, tôi nghĩ tôi phải theo dõi phần đã chọn của video và nhận âm thanh cho phần đó trước khi tạo video. Video có thể được tạo ra từ hình ảnh và âm thanh cùng nhau không?

Bây giờ, trước khi thử tất cả những điều này tôi rất thích nghe từ bất cứ ai đã làm điều gì đó tương tự, vì vậy tôi không theo một con đường điên không thể hoàn thành. Dự án này hiện có một số giới hạn ngân sách.

Tóm tắt các câu hỏi sau:

  1. tôi có nên sử dụng vải để tạo ra một phần được chọn của video?
  2. Tôi có thể thêm âm thanh vào video được tạo, từ video gốc không?
  3. Đây có phải là con đường để đi không?
  4. Có thực sự có thể tạo video trên iphone mà không đi fullscren không?
  5. Tôi rất thích các đề xuất chung khác về cách thực hiện việc này.
+0

Tôi vẫn cần trợ giúp về vấn đề này. – sindrem

Trả lời

2

Theo this post, bạn không có bất kỳ giải pháp nào để ứng dụng của bạn hoạt động trực tiếp "dưới dạng trang web". Người dùng phải lưu nó vào trang tổng quan của họ hoặc bạn phải tạo ứng dụng iOS bằng chế độ xem web ...

Chúc mừng.

0

Bạn có rất nhiều câu hỏi mà nên được tách biệt, không chỉ ở đây, nhưng tôi sẽ trả lời một vài:

Chơi inline video trên iPhone

iPhone và iPod buộc phát lại video toàn màn hình trong Safari (và trong các ứng dụng sử dụng WebView chưa sửa đổi của nó) nhưng bạn có thể giải quyết vấn đề này bằng cách mô phỏng phát lại bằng cách skimming video thay vì thực sự .play() 'ing.

Tôi đã viết một module sẽ chăm sóc của phát video inline và đồng bộ hóa nó vào âm thanh (nhưng nó cũng hoạt động trên video mà không cần một ca khúc âm thanh): iphone-inline-video

Với module gợi ý, bạn có thể:

// videoElement is the <video> element 
makeVideoPlayableInline(videoElement); 

// iOS needs user interaction to load/play a video, 
// so you'll need a start button or similar 
// You only need to load the video, so .play and then .pause it 
startButton.ontouchstart = function() { 
    videoElement.play(); 
    setTimeout(function() { videoElement.pause() }, 10); 
} 

khung Extracting

Khi video được tải, bạn chỉ có thể làm

// skim to 4.3 seconds 
video.currentTime = 4.3; 

// extract the frame to your canvas 
canvas.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 

Bây giờ, canvas của bạn sẽ có khung được trích xuất. Lưu hình ảnh từ canvas với một cái gì đó như array.push(ctx.getImageData()) (cẩn thận, đây thực sự là bộ nhớ chuyên sâu, nếu bạn lưu nhiều khung hình, bạn có thể phá vỡ trình duyệt)

Các vấn đề liên quan