html加载m3u8

86 阅读 0 评论 57 点赞

我是靠谱客的博主单纯小刺猬，最近开发中收集的这篇文章主要介绍html加载m3u8，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.现将MP4文件切割
比如视频文件名为cdhk.mp4

命令1：
ffmpeg -i cdhk.mp4 -profile:v baseline -level 3.0 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls m3u8

命令2：
ffmpeg -i input.mp4 -c copy -map 0 -f segment -segment_time 10 -segment_list out.m3u8 out%03d.ts

2.写html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>fz-live</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup='{}'>
<source src="/static/cdhk.m3u8" type="application/x-mpegURL">
</video>
<script>
var liveUrl
=
'/static/cdhk.m3u8';
var player = videojs('my_video_1');
player.ready(function() {
this.src({
src: liveUrl,
type: 'application/x-mpegURL',
});
});
</script>
</body>
</html>