如何在Hls.js中实现非m3u8源时播放MP4视频

根据需求，我们可以通过清晰的else if分支来分别处理MP4直接播放和m3u8通过hls.js加载的场景，代码实现如下：

// 获取页面中的video元素
const videoElement = document.getElementById('target-video');
// 替换为实际的视频源（路径或URL）
const videoSource = 'your-video-source-path';

// 分支1：非MP4（m3u8）且浏览器支持HLS时，用hls.js加载
if (videoSource.endsWith('.m3u8') && Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(videoSource);
    hls.attachMedia(videoElement);
    
    // 清单解析完成后自动播放
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoElement.play().catch(err => console.error('播放失败:', err));
    });
} 
// 分支2：MP4格式时直接加载播放
else if (videoSource.endsWith('.mp4')) {
    videoElement.src = videoSource;
    
    // 元数据加载完成后自动播放
    videoElement.addEventListener('loadedmetadata', () => {
        videoElement.play().catch(err => console.error('播放失败:', err));
    });
} 
// 可选：处理不兼容的边缘情况
else {
    console.error('当前视频格式不受支持，或浏览器无法兼容HLS播放');
}

代码说明 #

• 优先判断m3u8场景：先校验源格式为.m3u8，同时通过Hls.isSupported()确认浏览器支持HLS播放，满足则初始化hls实例并绑定video元素，等待清单解析完成后触发播放。
• 其次处理MP4场景：校验源格式为.mp4，直接为video元素设置src，监听loadedmetadata事件确保视频元数据加载完成后再播放。
• 最后的else分支用于处理两种格式都不匹配、或m3u8场景下浏览器不支持HLS的情况，可根据业务需求补充提示逻辑。

内容的提问来源于stack exchange，提问作者etbars