在开发的项目中，有视频播放这个功能，找了好多前端的插件，最后决定时用video.js 。
什么是video.js？
video.js是一个开源的HTML5 jquery 视频插件，这个插件可以用来处理Flash 视频，也可以很好的支持H5，它还是一个多平台支持的产品。
video.js的优点
- 它是开源免费的，可以在github很容易的获取到最新的源码。
- 使用起来非常容易，只要花几秒中就可以夹起一个视频播放页面。
- 它几乎兼容所有的浏览器，并且优先使用HTML5，在不支持的浏览器中，会自动生成Falsh进行播放。
- 纯js和css打造，使用最广泛的前端视频播放插件，说明文档详细，学习起来比较容易。
话不多说，代码里面的注释都很全，video.js中的api我也是了解的不是很多，在以后的具体项目中再学习记录。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video.js 学习2017-7-28</title>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<link href="css/video-js.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>
<!-- 如果要支持 IE8 -->
<!-- <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<style media="screen">
.video-div{
width: 400px;
height: 200px;
margin: 80px auto;
}
.video-js .vjs-tech {
/*这行代码最为关键，这样视频播放器的外层容器都由视频内容本身撑大*/
position: relative;
}
/* 设置暂停时中间的显示的播放按钮！ */
vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
/* 设置video 圆角 */
#myVideo1{
border-radius: 10px;
}
/* 设置播放按钮，矩形变 圆形 */
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
/**/
.vjs-has-started .vjs-control-bar{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div>
我是文字
</div>
<div class="video-div">
<!-- controls 设置或返回视频应该显示的控件，比如：暂停、播放 html5的新特性 -->
<!--
preload 是否在页面加载后再入视频 html5新特性
preload="auto" 当页面加载后载入整个视频
preload="meta" 当页面加载后载入元数据
preload="none" 当页面加载后不载入视频
-->
<!--
poster 视频加载时显示的图像，或者在用户点击播放之前显示的图片
如果未设置，使用视频的第一帧来代替 html5新特性
poster="URL";
-->
<!--
必须项
data-setup: 是json的数据格式,页面准备完成时自动加载，如果要强制在pc端使用 flash播放，
则有两种途径：1.通过 html的 data-setup=‘{ "techOrder":["flash", "html5"] }‘
2.通过js video("myVideo1",{"techOrder":["flash", "html5"]},function(){
// 第一个参数：video的id 二. 设置当前data-setup属性，也可以为 {}, 三. 执行的方法
})
-->
<!--
class说明：
video-js 应用所需的 Video.js 功能，如全屏和字幕样式。 必须项
vjs-default-skin 为 HMTL 控制条应用默认的皮肤，可以被移除或重写，以创建你自己的控制条样式。
-->
<!--
source 标签为媒介元素（video、audio）定义媒介资源
标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
属性：
src ：规定媒介文件的URl
type：规定媒体资源的 MIME 类型。
preload="meta"
-->
<video id="myVideo1" controls preload="auto" data-setup="{}" poster="00.jpg"
class="video-js vjs-default-skin vjs-big-play-centered" width="400" height="200">
<!-- 没有设置长和高 默认 1920 * 1080 -->
<!-- source 默认加载 一个文件资源 -->
<source src="1.mp4" type="video/webm">
<source src="2.mp4" type="video/mp4">
<!-- <source src="1.webm" type="video/webm">
<source src="1.ogv" type=‘video/ogg‘ /> -->
</video>
</div>
<div>
参看文献
<a href="http://www.awaimai.com/2053.html"></a>
<a href="http://blog.csdn.net/ly115176236/article/details/50977127"></a>
<a href="http://blog.csdn.net/huang100qi/article/details/53405876"></a>
<a href="http://www.cnblogs.com/ShaYeBlog/p/7068188.html"></a>
<a href="http://www.cnblogs.com/alicePanZ/articles/5676915.html"></a>
<a href="http://www.cnblogs.com/xinlinux/p/4365188.html"></a>
<a href="http://www.awaimai.com/2053.html"></a>
<a href="http://www.cnblogs.com/afrog/p/6689179.html"></a>
</div>
<div>
<p> 常用api </p>
//播放与暂停播放
myPlayer.play();
myPlayer.pause();
//设置/获取视频的当前播放时间
myPlayer.currentTime();
myPlayer.currentTime(120);
//视频总的时常
myPlayer.duration();
//获取或设置播放器的视频源
myPlayer.src();
myPlayer.src(‘www.baidu.mp4‘)
//获取或者设置视频播放器的poster 图片
myPlayer.poster();
myPlayer.poster(‘xxx.jpg‘);
</div>
</body>
<!-- 设置Falsh播放器的路径，如果浏览器不支持H5，将会使用Falsh： -->
<script type="text/javascript">
videojs.options.flash.swf = "static/video-js/video-js.swf";
</script>
<script>
// 初始化所有的video 标签
var videos = document.getElementsByTagName(‘video‘);
for(i=0; i<videos.length; i++) {
var video = videos[i];
if(video.className.indexOf(‘video-js‘) > -1) {
videojs(video.id).ready(function(){
});
}
}
// 获取视频播放器
var myPlayer = videojs("myVideo1",{
"controls": true,
"autoplay": false,
"preload": "auto",
"loop": false,
controlBar: {
// captionsButton: false,//用于切换和选择字幕的按钮组件
chaptersButton: false,//导航与其他语言的其他轨道
playbackRateMenuButton: true, //用于控制播放速率的组件
LiveDisplay: true, //显示实时指示器
subtitlesButton: false, //用于切换和选择字幕的按钮组件
remainingTimeDisplay: true,//显示视频中剩余的时间
progressControl: false, // 禁止出现进度条
//竖着的音量条
// volumeMenuButton: {
// inline: false,
// vertical: true
// },
fullscreenToggle: true //切换全屏视频
},
mydata: {
username: ‘xiaoming‘
}
},function(){
myPlayer.pause(); // 暂停
})
// 用js设置资源文件
// var myPlayer = videojs(‘my-player‘, {
// sources: [{
// src: ‘//path/to/video.mp4‘,
// type: ‘video/mp4‘
// }, {
// src: ‘//path/to/video.webm‘,
// type: ‘video/webm‘
// }]
// });
// videojs("myVideo1").ready(function(){
// var myPlayer = this;
// //myPlayer.play(); // 播放
// myPlayer.pause(); // 暂停
// var whereYouAt = myPlayer.currentTime();
// console.log(whereYouAt);
// });
// 事件关注
myPlayer.on("play",function(){
console.log("a");
var a = myPlayer.currentTime();
console.log(a);
// 我是开始播放时的事件
});
myPlayer.on("pause",function(){
// 我是暂停时的事件
})
myPlayer.on("ended",function(){
// 我是结束播放时的事件
});
</script>
</html>
时间： 2024-11-03 21:06:57