Video không phát trong safari khi sử dụng thẻ video html5

Question

Tôi đang xây dựng trang web bằng django. Tôi đang cố gắng đưa video vào trang web của mình bằng thẻ html5. Mã của tôi được đưa ra dưới đây.

<video controls style="width: 100%; height: 100%;" id="video" preload="none"> 
        <source src="{% static 'media/video1.ogv' %}" type='video/ogg; codecs="theora, vorbis"'/> 
        <source src="{% static 'media/video1.webm' %}" type='video/webm'> 
        <source src="{% static 'media/video1.mp4' %}" type='video/mp4'> 
        <p>Video is not visible, most likely your browser does not support HTML5 video</p> 
       </video> 

Nhưng video không phát trong trình duyệt Safari. Tôi đã thay đổi video thành tệp video1.mov nhưng vẫn không phát. Tôi đang sử dụng heroku để triển khai. Tôi đã kiểm tra xem Quickstart có được cài đặt hay không. Nó đã được cài đặt rồi. Lỗi được hiển thị là

Failed to load resource: Plug-in handled load 
http://www.***.com/static/media/video1.mov 

Một số người có thể giúp tôi sắp xếp điều này không?

Answer 1

Có thể là sự cố về cách mã hóa MP4. Tôi biết câu hỏi là một chút cũ, nhưng tôi đã có cùng một vấn đề, vì vậy trong trường hợp giúp bạn hoặc ai đó khác tìm thấy điều này đầu tiên như tôi đã làm:

Có vẻ như QuickTime (là plugin phát MP4 cho Safari) chỉ hoạt động khi tệp được mã hóa với một cấu hình nhất định. Điều này được quy định trong câu hỏi số 2 trong số Apple's FAQ.

Mặc dù đặc tả giao thức không giới hạn các định dạng video và audio, Apple thực hiện hiện nay hỗ trợ các định dạng sau:

Video: H.264 Baseline Cấp 3.0, Baseline Cấp 3.1, Main Level 3.1, và cấp độ hồ sơ cao 4.1.

Audio: HE-AAC hoặc AAC-LC lên đến 48 kHz, stereo audio MP3 (MPEG-1 Audio Layer 3) 8 kHz đến 48 kHz, stereo audio AC-3 (đối với Apple TV, trong qua chỉ dành cho chế độ chỉ)

Bạn cần mã hóa bằng một trong các cấu hình video đó để làm cho nó hoạt động với QuickTime và do đó là Safari.

Nếu bạn đang nhắm mục tiêu các thiết bị iOS cũng có, this table có thể hữu ích quá, để biết những gì bạn đang tương thích với:

cơ bản 3.0: Tất cả các thiết bị

cơ bản 3.1 : iPhone 3G trở lên và iPod touch thế hệ thứ 2 trở lên.

Cấu hình chính 3.1: iPad (mọi phiên bản), Apple TV 2 trở lên và iPhone 4 trở lên.

Hồ sơ Main 4.0: Apple TV 3 và sau đó, iPad 2 và sau đó, và iPhone 4S và sau

High Profile 4.0: Apple TV 3 và sau đó, iPad 2 và sau đó, và iPhone 4S và sau đó.

Cấu hình cao 4.1: iPad 2 trở lên và iPhone 4S trở lên.

Và cuối cùng, đây là những ffmpeg tùy chọn để tạo các mã hóa: https://trac.ffmpeg.org/wiki/Encode/H.264#AdditionalInformationTips

Nó cũng hữu ích để biết rằng bạn chỉ có thể mở một tập tin trong QuickTime (bạn không cần phải tải qua Safari) để kiểm tra xem tệp có hoạt động hay không.