Tôi làm cách nào để phát luồng trực tiếp Apple HLS bằng thẻ video html5

Question

<video id="live" autoplay controls> 
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" /> 
</video> 

Tôi đang cố gắng phát luồng trực tiếp được mã hóa h264 bằng thẻ video html5. Phát trực tiếp được phát sóng bởi máy chủ phương tiện wowza và khi truy cập vào liên kết src, tôi nhận được một tệp danh sách phát hợp lệ. Khi cố gắng phát luồng trên trình duyệt Chrome android, trình phát không thực hiện gì và hiển thị màn hình màu đen.

Đây có phải là vấn đề liên quan đến thẻ video html5 hoặc có thể là đài truyền hình không?

Answer 1

Đây là các định dạng bạn có thể phát bằng cách sử dụng thẻ nguồn html5.

Hãy nghĩ định dạng video dưới dạng tệp zip chứa luồng video và luồng âm thanh được mã hóa. Ba định dạng mà bạn nên quan tâm đến cho các trang web là (webm, mp4 và ogv):

.mp4 = H.264 + AAC 
.ogg/.ogv = Theora + Vorbis 
.webm = VP8 + Vorbis 

Answer 2

Đối với cách giải quyết sử dụng flash, bạn có thể sử dụng máy nghe nhạc FlasHLS có chrome.

Answer 3

trên các trình duyệt hỗ trợ Media Source Extension bạn có thể sử dụng https://github.com/dailymotion/hls.js

Answer 4

Có thực sự là một phạm vi tốt các giải pháp cho việc này. Một giải pháp sẽ là phát hiện xem HLS có thể được phát:

document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== '' 

Tuy nhiên, điều này sẽ không cho phép bạn phát nội dung HLS trên các thiết bị không hỗ trợ phát lại. Tại thời điểm này, phát lại chỉ được hỗ trợ trên Microsoft Edge, iOS Safari, OS X Safari và Android (however, I strongly advise against using HLS on Android due to limitations)

Một giải pháp khác để phát HLS trên tất cả các nền tảng trong HTML5 là sử dụng trình phát HTML5 HLS chẳng hạn như THEOplayer. Họ quản lý để cho phép HLS được phát trên all popular platforms and devices, bao gồm cả những người không có hỗ trợ Media Source Extension. Hiện tại, danh sách các trình duyệt và nền tảng được hỗ trợ bao gồm: Internet Explorer, Edge, Firefox, Chrome, Opera và Safari trên Windows, Linux, Mac OS X, Android, iOS và Windows Phone.

Answer 5

Hãy thử FlowPlayer. Nó cung cấp một hỗ trợ HLS đầy đủ với nỗ lực ít nhất ở phía máy chủ!