网页播放m3u8

Question

为什么直接使用video标签不能播放m3u8，但是使用h5包装过的播放器就能播放m3u8了呢？

Answer 1

https://github.com/video-dev/...

import * as Hls from "hls.js";

const video = document.querySelector("#your-video-id");
const url = "你的播放地址";

if(video.canPlayType("application/vnd.apple.mpegurl")){
    // 原生支持
    video.src = url;
    video.addEventListener("loadedmetadata", function() {
        try {
            video.play();
        } catch (error) {
            console.log(error);
        }
    });
}else if (Hls.isSupported()){
    const hls = new Hls({
        // 假设你的视频使用 AAC LC 音频编码
        defaultAudioCodec: "mp4a.40.2",
    });
    hls.loadSource(url);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
        try {
            video.play();
        } catch (error) {
            console.log(error);
        }
    });
}else{
    // 扁鹊三联
    console.log("治不了、等死吧、告辞");
}