h5 video支持hls（.m3u8）文件播放

作者: plum_meizi | 来源:发表于2021-11-15 16:44 被阅读0次

书签-视频
iOS开发 - 基于ijkPlayer的播放器框架
Vue播放rtmp/Hls实时视频踩坑日记
h5直播播放器
小程序直播开发（一）：直播工作原理
uniapp中使用videojs构建H5直播播放器
AVPlayer播放缓存
ffmpeg分片 m3u8以及视频截取
FFmpeg转封装（4）
hls.js库解析（一）---事件链调用

1.安装

npm install hls.js

2.使用

<video ref="hlsvideo" loop autoplay controls></video>

import Hls from 'hls.js';

private init(data) {
    // 支持 .m3u8 hls
    const hlsvideo = this.$refs.hlsvideo as HTMLMediaElement;
    const hls = new Hls();
    hls.loadSource(data.videoUrl);
    hls.attachMedia(hlsvideo);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
    hlsvideo.play();
    });
}

书签-视频
视频 Android 离线播放 (HLS)m3u8文件 - CSDN博客Android 实现m3u8视频缓存 - ...
iOS开发 - 基于ijkPlayer的播放器框架
基于ijkPlayer的网络播放器，支持网络视频、RTMP、HLS(m3u8)等多种格式3分钟快速集成播放器，支持...
Vue播放rtmp/Hls实时视频踩坑日记
1 rtmp 使用vue-video-play播放（支持rtmp和hls）备注：上述能够正常播放芒果台实时视频，...
h5直播播放器
浏览器协议协议h5直播只能播放hls协议，flv协议不支持，rtmp协议不支持pc端浏览器支持hls、flv协议a...
小程序直播开发（一）：直播工作原理
直播原理：直播协议： 1、HLS协议：对于hls协议来说，一开始会先发放一个m3u8文件，m3u8文件指向很多...
uniapp中使用videojs构建H5直播播放器
这两天在开发H5直播带货功能模块，使用原生的video播放器播放不了m3u8的流地址，于是找了videojs，参考...
AVPlayer播放缓存
首先推荐一款自己编写的一款简单播放器BCPlayer它实现了几种播放模式，并且支持hls，m3u8格式视频。简单易...
ffmpeg分片 m3u8以及视频截取
M3u8:从文件转HLS直播，也就是生成m3u8文件：./ffmpeg -re -i test.mp4 -c co...
FFmpeg转封装（4）
M3U8在FFmpeg中的Muxer 查看HLS文件的Muxer信息转HLS "-bsf:v h264_mp4t...
hls.js库解析（一）---事件链调用
从事件链角度解析video-dev/hls.js库 src/hls.js文件 1、new Hls()语句执行过程没...