video.js
是开源插件，据说甚至可以集合到gitbook上
note
:
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。
参考文章:
注意点：加载flash动画后，chrome ie firefox播放界面才能统一，否则各有各的界面
<!doctype html>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="video-js/video-js.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<script src="video-js/ie8/videojs-ie8.js"></script>
<script src="video-js/videojs-contrib-hls.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = "static/video-js/video-js.swf";
</script>
</head>
<div id="videocontainer">
<video id="example_video" class="video-js vjs-default-skin vjs-big-play-centered"
preload="auto" controls
width="800" height="600" align="middle" poster=""
data-setup="{ "html5" : { "nativeTextTracks" : false } }">
<source src="你的名字.mp4" type="video/mp4"/>
<source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
type="application/x-mpegURL">
<source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv"/>
</video>
</div>
</div>
</body>
</html>
-
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
自定义控制条
Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
使用：以添加按钮为例子
var player = videojs("example_video", {
"controls": true,
"autoplay": false,
"preload": "auto",
"loop": false,
controlBar: {
captionsButton: false,
chaptersButton: false,
playbackRateMenuButton: true,
LiveDisplay: true,
subtitlesButton: false,
remainingTimeDisplay: true,
progressControl: true,
volumeMenuButton: {
inline: false,
vertical: true
},
fullscreenToggle: true
}, function () {
做法1：直接append添加
$(".vjs-control-bar").append('<button class="vjs-control " id="danmu_send_opt"><u>按钮1</u></button>');
做法2：dom添加
var controlBar,
newElement = document.createElement('div'),
newLink = document.createElement('a'),
newImage = document.createElement('img');
newElement.id = 'downloadButton';
newElement.className = 'downloadStyle vjs-control';
newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
newLink.setAttribute('href','http://www.baidu.com');
newLink.appendChild(newImage);
newElement.appendChild(newLink);
controlBar = document.getElementsByClassName('vjs-control-bar')[0];
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
controlBar.insertBefore(newElement,insertBeforeNode);
做法3：简化2的写法
var newbtn = document.createElement('btn');
newbtn.innerHTML = '<button class="vjs-control" id="downloadButton"></button>';
var controlBar = document.getElementsByClassName('vjs-control-bar')[0];
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
controlBar.insertBefore(newbtn,insertBeforeNode);
-
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
自定义控制条完整例子：
添加滑条音频控制和弹幕样式开关
自定义样式：
video.js 采用flex布局，所以float这种不起作用
如果想要使用float,需要修改默认的video.js.css
并且后面的按钮都要进行样式调整
.vjs-has-started .vjs-control-bar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: block;
visibility: visible;
opacity: 1;
-webkit-transition: visibility 0.1s, opacity 0.1s;
-moz-transition: visibility 0.1s, opacity 0.1s;
-o-transition: visibility 0.1s, opacity 0.1s;
transition: visibility 0.1s, opacity 0.1s;
……省略无关部分
.video-js .vjs-play-control {
float:left;
cursor: pointer;
-webkit-box-flex: none;
-moz-box-flex: none;
-webkit-flex: none;
-ms-flex: none;
flex: none;
.video-js .vjs-fullscreen-control {
cursor: pointer;
-webkit-box-flex: none;
-moz-box-flex: none;
-webkit-flex: none;
-ms-flex: none;
flex: none;
float: right;
-
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
使用开源jquery.danmu.js
jquery弹幕插件使用
jquery弹幕插件 github
video.js集成例子
<!doctype html>
<html lang="en"
>
<meta charset="UTF-8">
<link href="video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<script src="video-js/ie8/videojs-ie8.js"></script>
<script src="video-js/videojs-contrib-hls.js"></script>
<script src="danmu/jquery-1.11.1.min.js"></script>
<script src="../../../../../桌面/tanmu/DanmuPlayer/src/js/jquery.danmu.js"></script>
<script type="text/javascript">
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<title>RtmpPlayerTest</title>
</head>
<video id="example_video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1024" height="768"
poster=""
data-setup='{ "html5" : { "nativeTextTracks" : false } }'>>
<source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv" />
<div id="danmu">
</div>
<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>
</video>
<div id="danmu" >
</div>
<div class="text-center ctr">
<button type="button" onclick="resumer() ">弹幕开始/继续</button>
<button type="button" onclick="pauser()">弹幕暂停</button>
显示弹幕:<input type='checkbox' checked='checked' id='ishide' value='is' onchange='changehide()'>
弹幕透明度:
<input type="range" name="op" id="op" onchange="op()" value="100"> <br>
当前弹幕运行时间(分秒)：<span id="time"></span>
设置当前弹幕时间(分秒)： <input type="text" id="set_time" max=20/>
<button type="button" onclick="settime()">设置</button>
<select name="color" id="color">
<option value="white">白色</option>
<option value
="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</select>
<select name="size" id="text_size">
<option value="1">大文字</option>
<option value="0">小文字</option>
</select>
<select name="position" id="position">
<option value="0">滚动</option>
<option value="1">顶端</option>
<option value="2">底端</option>
</select>
<input type="textarea" id="text" max=300/>
<button type="button" onclick="send()">发送</button>
</div>
</body>
<script type="text/javascript">
var player = videojs('example_video');
</script>
<script>
(function () {
$("#danmu").danmu({
left: 0,
top: 0,
height: "100%",
width: "100%",
zindex: 100,
speed: 30000,
opacity: 1,
font_size_small: 16,
font_size_big: 24,
top_botton_danmu_time: 6000
})(jQuery);
query();
timedCount();
var first = true;
function timedCount() {
$("#time").text($('#danmu').data("nowtime"));
t = setTimeout("timedCount()", 50)
function starter() {
$('#danmu').danmu('danmu_start');
function pauser() {
$('#danmu').danmu('danmu_pause');
function resumer() {
$('#danmu').danmu('danmu_resume');
function stoper() {
$('#danmu').danmu('danmu_stop');
function getime() {
alert($('#danmu').data("nowtime"));
function getpaused() {
alert($('#danmu').data("paused"));
function add() {
var newd =
{"text": "new2", "color": "green", "size": "1", "position": "0", "time": 60};
$('#danmu').danmu("add_danmu", newd);
function insert() {
var newd = {"text": "new2", "color": "green", "size": "1", "position": "0", "time": 50};
str_newd = JSON.stringify(newd);
$.post("stone.php", {danmu: str_newd}, function (data, status)
{
alert(data)
function query() {
$.get("query.php", function (data, status) {
var danmu_from_sql = eval(data);
for (var i = 0; i < danmu_from_sql.length; i++) {
var danmu_ls = eval('(' + danmu_from_sql[i] + ')');
$('#danmu').danmu("add_danmu", danmu_ls);
function send() {
var text = document.getElementById('text').value;
var color = document.getElementById('color').value;
var position = document.getElementById('position').value;
var time = $('#danmu').data("nowtime") + 5;
var size = document.getElementById('text_size').value;
var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' + position + '","time":' + time + '}';
$.post("stone.php", {danmu: text_obj});
var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' + position + '","time":' + time + ',"isnew":""}';
var new_obj = eval('(' + text_obj + ')');
$('#danmu').danmu("add_danmu", new_obj);
document.getElementById('text').value = '';
function op() {
var op = document.getElementById('op').value;
$('#danmu').data("opacity", op);
function changehide() {
var op = document.getElementById('op').value;
op = op / 100;
if (document.getElementById("ishide").checked) {
jQuery('#danmu').data("opacity", op);
jQuery(".flying").css({
"opacity": op
} else {
jQuery('#danmu').data("opacity", 0);
jQuery(".flying").css({
"opacity": 0
function settime() {
var t = document.getElementById("set_time").value;
t = parseInt(t)
console.log(t)
$('#danmu').data("nowtime", t);
</script>
</html>
-
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
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
plugin
plugin sample
原文地址：http://blog.csdn.net/software1/article/details/53906992video.js直接使用自定义控制条和样式弹幕相关plugin写法video.js 是开源插件，据说甚至可以集合到gitbook上note: 一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者n
通过克隆，分叉或下载
在您的文档中包含
video
js
.embed.
js
，可以通过应用程序或通过<head>进行编译。
像一样，
使用
Embed
插件
初始化
Video
JS
Player。
当您的媒体源是可嵌入的时，您应该在控制栏中看到“投射”按钮。
video
js
( "my_player_id" , {
plugins : {
embed : {
embeddable : true ,
location : '//embed.theguardian.com/embed/
video
/my-
video
'
} ) ;
video.js
是开源
插件
，据说甚至可以集合到gitbook上note:
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。参考文章:
HTML5视频播放器
Video.Js
clear all
fileName = 'C:\\Users\\15151\\Desktop\\1.avi'; % 视频路径
obj =
Video
Reader(fileName);
numFrames = obj.NumberOfFrames ;% 帧的总数
for k = 100 : 140 % 读取数据
frame = read(obj, k);
frame = imresize(frame, [720, 1280]);
%imshow(fra.
在项目上遇到类似于直播的场景所以需要前端播放后台的视频流这个问题，所以就此问题记录一下，
在上一篇文章中写到了怎样搭建nginx流媒体服务器以及怎样
使用
ffmpeg进行推流，那么现在就缺前端拉流这一部分，通过这两个天的辛勤劳动终于解决了，在这也希望分享给正在搞这个问题的童鞋们。
一、简单了解几种流
HLS流：
1、HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Li...
Video.js
是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一，也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染，在引入
Video.js
后，轻松解决。本教程手把手教你搭建一套基于 Vue 的
Video.js
视频播放页。
跟随本教程学习，最终你可以自己搭建一套可以播放本地视频文件及网络流媒体的网页视频播放器。学习如何修改
video.js
的默认样式来实现播放按钮
自定义
形状(圆形)、居中及播放时间的显示与否， 如何播放 m3u8 格式，以及如何
使用
video
的属性、事件及
OpenCV 中
video
.get() 的
使用
方法是：1. 首先在程序中导入 OpenCV 模块：import cv2
2.
使用
Video
Capture() 函数创建一个
Video
Capture 对象：capture = cv2.
Video
Capture(0)
3. 调用
Video
Capture 对象的 get() 方法来获取视频的一些属性：frame_width = capture.get(cv2.CAP_PROP_FRAME_WIDTH)
4.
使用
read() 方法读取帧：ret, frame = capture.read()
Wick_ham:
Java ImageIO图片操作
王俞励——最后冲刺！:
Elastic-Job dump作业运行信息（便于开发者debug）
奥利弗嗷:
