实现全平台兼容播放 m3u8 视频

搭建简单的流媒体服务器，用来播放 m3u8 视频流。

Demo 展示

Demo

安装nginx，新建一个虚拟主机并配置域名，如:www.video.com (用dnsmasq配置域名，内网地址192.168.1.16)，nginx配置如下：

让nginx支持m3u8

//nginx.conf

user www;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;
worker_rlimit_nofile 65536;

events {
use epoll;
worker_connections 65536;
multi_accept on;
}

http {
include mime.types;
default_type application/octet-stream;

#log_format main ‘$remote_addr – $remote_user [$time_local] “$request” ‘
# ‘$status $body_bytes_sent “$http_referer” ‘
# ‘”$http_user_agent” “$http_x_forwarded_for”‘;

#access_log logs/access.log main;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
#autoindex on;
listen 80;
server_name www.xujh.com;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root html;
index index.html index.htm;
}

location /nginx_status {
stub_status on;
access_log off;

}

server {
listen 80;
server_name www.video.com;
location / {
root html/video;
index index.html index.htm;
}
}
}

视频切片

通过ffmpeg+segmenter(linux中叫m3u8-segmenter)切片传输到www.video.com

ffmpeg -i “D:\hualu.mp4” -f mpegts -vcodec libx264 -s 1280×720 -c:a copy -b 1536k -r 24 -flags +loop -cmp +chroma -partitions +parti4x4+partp8x8+partb8x8 -subq 5 -trellis 1 -refs 1 -coder 0 -me_range 16 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -bt 400k -maxrate 1700k -bufsize 524288 -rc_eq ‘blurCplx^(1-qComp)’ -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -level 30 -aspect 16:9 -g 30 -async 2 – | segmenter – 10 hualu/hualu hualu/hualu.m3u8 http://www.video.com/hls/ 0 1
pause

提示

rem -c:a copy来同步源视频的音频格式 rem libmp3lame是mp3格式，用video.js在pc上播放没有声音,在手机上可以播放

rem ffmpeg -i “D:\xjhtest\ONELIVE.mp4″ -f mpegts -vcodec libx264 -s 1280×720 -acodec libmp3lame -b 1536k -r 24 -flags +loop -cmp +chroma -partitions +parti4x4+partp8x8+partb8x8 -subq 5 -trellis 1 -refs 1 -coder 0 -me_range 16 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -bt 400k -maxrate 1700k -bufsize 524288 -rc_eq ‘blurCplx^(1-qComp)’ -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -level 30 -aspect 16:9 -g 30 -async 2 – | segmenter – 10 xjhtest/xjhtest1 xjhtest/SamplePartList.m3u8 http://wtjsvideo.wtjs.mobi/ 0 1

使用nginx存储视频

在nginx的html目录下新建video目录，用来存放m3u8文件及video.js的css、js文件等

注意

最好是将视频放在CDN上，如:七牛云

目录格式如下：

xujh@ubuntu-Docker:/usr/local/nginx/html$ tree video
video
├── css
│ ├── video-js-5205.css
│ ├── video-js.css
│ └── videojs-share.css
├── flash
│ ├── video-js-5205.swf
│ └── video-js-541.swf
├── hls
│ ├── 1.jpg
│ └── hualu
│ ├── hualu-10.ts
│ ├── hualu-11.ts
│ ├── hualu-12.ts
│ ├── hualu-13.ts
│ ├── hualu-14.ts
│ ├── hualu-15.ts
│ ├── hualu-16.ts
│ ├── hualu-17.ts
│ ├── hualu-18.ts
│ ├── hualu-19.ts
│ ├── hualu-1.ts
│ ├── hualu-20.ts
│ ├── hualu-21.ts
│ ├── hualu-22.ts
│ ├── hualu-23.ts
│ ├── hualu-2.ts
│ ├── hualu-3.ts
│ ├── hualu-4.ts
│ ├── hualu-5.ts
│ ├── hualu-6.ts
│ ├── hualu-7.ts
│ ├── hualu-8.ts
│ ├── hualu-9.ts
│ └── hualu.m3u8
├── hls.html
├── index.html
├── js
│ ├── video.js
│ ├── videojs-contrib-hls.js
│ ├── videojs-contrib-quality-levels.js
│ ├── videojs-flash.js
│ ├── videojs-ie8.js
│ ├── videojs-playlist.js
│ └── videojs-share.js
├── m3u8demo.html
└── playm3u8.html

视频播放页代码

新建播放页index.html，放在www.video.com的根目录下。

index.html内容如下：

!DOCTYPE html
<html>
<head>
<title> videojs-contrib-hls Demo </title>
<link href=”./css/video-js.css” rel=”stylesheet”>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.info {
background-color: #eee;
border: thin solid #333;
border-radius: 3px;
padding: 0 5px;
margin: 20px 0;
}
input {
margin-top: 15px;
min-width: 450px;
padding: 5px;
}
</style>
</script>
</head>
<body>
<!–vjs-big-play-centere设置初始播放按钮居中，默认是在左上方–>
<video id=”videojs-contrib-hls-player” class=”video-js vjs-default-skin vjs-big-play-centered” controls poster=”http://www.video.com/hls/1.jpg”>
<source src=”./hls/hualu/hualu.m3u8″ type=”application/x-mpegURL”>
</video>

<form id=load-url>
<label>
<Video URL:>
<!–此处的地址如果设置为http://192.168.1.16/video/hls/hualu/hualu.m3u8时通过www.video.com/hlsdemo.html访问就会出现跨域问题，但如果是通过http://192.168.1.16/video/hls/hualu/hualu.m3u8时通过www.video.com/hlsdemo.html访问也会出现跨域问题–>
<input id=url type=url value=”http://www.video.com/hls/hualu/hualu.m3u8″>
</label>
<button type=submit Load ></button>
</form>
<!–video.js版本是6.7.4–>
<script src=”./js/video.js”> </script>
<!–video.js版本大于6时已不支持flash,添加flash插件即可支持flash–>
<script src=”./js/videojs-flash.js”> </script>
<!–支持在PC及安卓设备上播放m3u8文件–>
<script src=”./js/videojs-contrib-hls.js”>< /script>
!–支持在IE8播放–
<script src=”./js/videojs-ie8.js”>< /script>
<script>
(function(window, videojs) {
var player = window.player = videojs(‘videojs-contrib-hls-player’);

// hook up the video switcher
var loadUrl = document.getElementById(‘load-url’);
var url = document.getElementById(‘url’);
loadUrl.addEventListener(‘submit’, function(event) {
event.preventDefault();
player.src({
src: url.value,
type: ‘application/x-mpegURL’
});
return false;
});
}(window, window.videojs));
</script>
</body>
</html>

至此即可通过www.video.com来播放m3u8视频了。

跨域问题

hualu.m3u8中的ts路径应为

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://www.video.com/hls/hualu/hualu-1.ts
#EXTINF:10,
http://www.video.com/hls/hualu/hualu-2.ts
#EXTINF:10,
http://www.video.com/hls/hualu/hualu-3.ts
#EXTINF:10,
http://www.video.com/hls/hualu/hualu-4.ts
#EXTINF:10,

这种，如果里面的内容是http://192.168.1.16/video/hls/hualu/hualu-4.ts这样的格式就会出现跨域错误。

必须是以域名能访问到的ts文件。

另外一种解决跨域的方法就是利用nginx的反向代理，此次没有出现调用其它域名请求的情况，所以就没用反向代理解决跨域问题。

如何下载 m3u8 视频

使用 ffmpeg 下载 m3u8 视频：ffmpeg -i https://yuledy.helanzuida.com/20201228/17296_a03b1fe2/1000k/hls/index.m3u8 -c copy -bsf:a aac_adtstoasc ./26.mp4

上次更新:
贡献者: iEchoxu