logo头像

技术引领生活!

HTML5播放m3u8的方法

现在越来越多的网站采用 m3u8 的方式来播放视频,但是原生的浏览器(除 Safari 外)都不支持,经搜索发现 video-js 可以将 m3u8 嵌到网页中,特记录之…

步骤

  1. 引入 video-js
  2. 定义一个 video 标签,源就直接填写 m3u8 路径好了
  3. 初始化,直接用

Why

为什么要写这个呢? 本人认为 m3u8 几乎是未来视频的主要方向了,特别是发现一个视频网站想做一个播放器,思路有二:

  1. 全部用 ffmpeg 解码
  2. 做成网页的形式(简单方便)

上述方法中 1 方法比较繁琐,但是可控性强,方法 2 使用快速特别是做服务器的同学(比如写个爬虫爬到 m3u8 然后做个小服务器进行转流),或者结合两者,一直有个想法做播放器来着.待我慢慢来…

PS

将 Mp4 转 m3u8 命令

1
fmpeg -i foo.mp4 -codec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_list out.m3u8 -segment_time 10 out%03d.ts

PPS

测试代码备份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js 7.4.1</title>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<style>
body {
background-color: #191919;
}
.m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
</head>

<body>
<div class="m">
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="960"
height="400"
poster="m.jpg"
data-setup="{}"
>
<source
src="http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8"
type="application/x-mpegURL"
/>
<!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> -->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<script type="text/javascript">
//设置中文
videojs.addLanguage("zh-CN", {
Play: "播放",
Pause: "暂停",
"Current Time": "当前时间",
Duration: "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
LIVE: "直播",
Loaded: "加载完毕",
Progress: "进度",
Fullscreen: "全屏",
"Non-Fullscreen": "退出全屏",
Mute: "静音",
Unmute: "取消静音",
"Playback Rate": "播放速度",
Subtitles: "字幕",
"subtitles off": "关闭字幕",
Captions: "内嵌字幕",
"captions off": "关闭内嵌字幕",
Chapters: "节目段落",
"Close Modal Dialog": "关闭弹窗",
Descriptions: "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.":
"网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.":
"视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.":
"由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
"No compatible source was found for this media.":
"无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.":
"视频已加密,无法解密。",
"Play Video": "播放视频",
Close: "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.":
"可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
Replay: "重播",
"Progress Bar": "进度小节",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
Text: "文字",
White: "白",
Black: "黑",
Red: "红",
Green: "绿",
Blue: "蓝",
Yellow: "黄",
Magenta: "紫红",
Cyan: "青",
Background: "背景",
Window: "视窗",
Transparent: "透明",
"Semi-Transparent": "半透明",
Opaque: "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
None: "无",
Raised: "浮雕",
Depressed: "压低",
Uniform: "均匀",
Dropshadow: "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
Casual: "舒适",
Script: "手写体",
"Small Caps": "小型大写字体",
Reset: "重启",
"restore all settings to the default values": "恢复全部设定至预设值",
Done: "完成",
"Caption Settings Dialog": "字幕设定视窗",
"Beginning of dialog window. Escape will cancel and close the window.":
"开始对话视窗。离开会取消及关闭视窗",
"End of dialog window.": "结束对话视窗"
});

var myPlayer = videojs("my-video");
videojs("my-video").ready(function() {
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>
支付宝打赏 微信打赏

您的支持是我前行的动力!