video.js 自定义使用

video.js

  • 直接使用
  • 自定义控制条和样式
  • 弹幕相关
  • plugin写法

video.js 是开源插件,据说甚至可以集合到gitbook上

note
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的,需要用iis或者nginx 或者beego这些服务端的玩意加载后,在前端浏览器才能看到视频页面。

参考文章:

直接使用

注意点:加载flash动画后,chrome ie firefox播放界面才能统一,否则各有各的界面

<!doctype html>
<html>
<head>
<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>
<!-- 加载hls视频插件 -->
<script src="video-js/videojs-contrib-hls.js"></script>
<!-- 加载flash播放器 -->
<script type="text/javascript">
videojs.options.flash.swf = "static/video-js/video-js.swf";
</script>
</head>
<body>

<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="{ &quot;html5&quot; : { &quot;nativeTextTracks&quot; : false } }">
<source src="你的名字.mp4" type="video/mp4"/>
<!-- 加载hls视频-->
<source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
type="application/x-mpegURL">
<!-- 加载rtmp视频-->
<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
RemainingTimeDisplay
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');
// Assign id and classes to div for icon
newElement.id = 'downloadButton';
newElement.className = 'downloadStyle vjs-control';
// Assign properties to elements and assign to parents
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);
// Get control bar and insert before elements
// Remember that getElementsByClassName() returns an array
controlBar = document.getElementsByClassName('vjs-control-bar')[0];
// Change the class name here to move the icon in the controlBar
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
// Insert the icon div in proper location
controlBar.insertBefore(newElement,insertBeforeNode);
//controlBar.appendChild(newElement);

/*
做法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;
/*原为flex*/
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*/
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*/
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">
<head>
<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>
<body>
<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" />
<!-- <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/x-mpegURL" /> -->
<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>
</p>

</video>
<div id="danmu" >
</div>
<div class="text-center ctr">
<br>

<button type="button" onclick="resumer() ">弹幕开始/继续</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" onclick="pauser()">弹幕暂停</button>
&nbsp;&nbsp;&nbsp;&nbsp;
显示弹幕:<input type='checkbox' checked='checked' id='ishide' value='is' onchange='changehide()'> &nbsp;&nbsp;&nbsp;&nbsp;
弹幕透明度:
<input type="range" name="op" id="op" onchange="op()" value="100"> <br>
当前弹幕运行时间(分秒):<span id="time"></span>&nbsp;&nbsp;
设置当前弹幕时间(分秒): <input type="text" id="set_time" max=20/>
<button type="button" onclick="settime()">设置</button>

<br>

发弹幕:
<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:$("#danmuarea").offset().left,
// top:$("#danmuarea").offset().top,
// height: 445,
// width: 800,
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

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值