之前使用videojs用来网页中播放视频，现在做一下总结（这里把插件下载及演示地址、使用方法及demo放出来）

视频播放插件Video.js

插件下载地址： http://www.jq22.com/jquery-info404

演示播放视频地址：http://www.jq22.com/yanshi404 （直接从浏览器打开观看效果）

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

在页面中引用video-js.cs样式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

<script>videojs.options.flash.swf = "video-js.swf";
</script>

html

poster="**"播放初始图。可使用三种视频格式，根据所需要格式选择对应的。

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.png"data-setup="{}"><source src="http://视频地址格式1.mp4" type='video/mp4' /><source src="http://视频地址格式2.webm" type='video/webm' /><source src="http://视频地址格式3.ogv" type='video/ogg' /><track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --><track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

设置自动播放将下面代码加到html中代码后面

<script type="text/javascript">var myPlayer = videojs('example_video_1');videojs("example_video_1").ready(function(){var myPlayer = this;myPlayer.play();});
</script>

默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式，比如：

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"controls preload="auto" width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.png"data-setup='{"example_option":true}'>...
</video>

如果你还对播放按钮样式不满意可重新定义.video-js .vjs-big-play-button{/*这里的样式重写*/}。

为动态加载的 HTML 元素设置 Video.js

如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点，首先将 data-setup属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 javascript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后，

videojs("example_video_1", {}, function(){// Player (this) is initialized and ready.
});

videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。

第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。

第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后，就会触发这个回调。

你也可以传入一个元素本身的引用来代替元素ID：

videojs(document.getElementById('example_video_1'), {}, function() {// This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {// You can grab an element by class if you'd like, just make sure// if it's an array that you pick one (here we chose the first).
});

如果您无法播放内容，您得确保使用了正确的格式，你的 HTTP 服务器可能无法提供正确的 MIME类型的内容。

以下感谢网友怀念★往事的分享

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){//在回调函数中，this代表当前播放器，//可以调用方法，也可以绑定事件。
})

播放：myPlayer.play();

暂停：myPlayer.pause();

获取播放进度：var whereYouAt = myPlayer.currentTime();

设置播放进度：myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效：

var howLongIsThis = myPlayer.duration();

缓冲，就是返回下载了多少：var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲：var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1之间）：var howLoudIsIt = myPlayer.volume();

设置声音大小：myPlayer.volume(0.5);

取得视频的宽度：var howWideIsIt = myPlayer.width();

设置宽度：myPlayer.width(640);

获取高度：var howTallIsIt = myPlayer.height();

设置高度：myPlayer.height(480);

一步到位的设置大小：myPlayer.size(640,480);

全屏：myPlayer.enterFullScreen();

离开全屏：myPlayer.enterFullScreen();

添加事件：

durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inheritedvar myFunc = function(){// Do something when the event is fired
};

事件绑定

myPlayer.on("ended", function(){console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){console.log("pause")
});

删除事件： myPlayer.removeEvent(“eventName”, myFunc);

一个页面中有多个视频，需要点击后触发bootstrap 的模态窗，再弹出视频

我个人的方法是：

html:

<a videohref="http://xxx.mp4" class="video_link"><img  src="../images/xxx.jpg"/></a>

JS:

$(".video_link").click(function() {var myPlayer = videojs('my-video');var videoUrl = $(this).attr("videohref");videojs("my-video", {}, function() {window.myPlayer = this;$("#mymoda .video-con #my-video source").attr("src", videoUrl);myPlayer.src(videoUrl);myPlayer.load(videoUrl);myPlayer.play();});$(".click-modal").click();
});
// 模态窗消失时，关闭视频
$('#mymoda').on('hidden.bs.modal', function() {myPlayer.pause();
});

下面送上项目真实案例（带效果图）

先上源码：（把视频播放背景图及视频改为网络上的，或你本地的即可），先下载video.js

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>视频在线播放</title><link href="css/video-js.min.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/video.min.js"></script><style type="text/css">.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;}/** 播放器显示控制 */.myVideo-dimensions {margin: 0 auto;}</style></head>
<body oncontextmenu="self.event.returnValue=false" onselectstart="return false" >
<div >
<video id="myVideo" class="video-js vjs-big-play-centered"controls preload="auto" width="800" height="500"poster="img/itxdl.png"data-setup='{"example_option":true}'><source src="兄弟连2017新版BS结构软件类型介绍.mp4" type='video/mp4' />
</video>
</div>
</body>
</html>

效果图：

源码已经打包到百度云盘，下载地址：

链接：https://pan.baidu.com/s/1WVJcZkeou-WX2CPnrdp2cA
提取码：8y9h
复制这段内容后打开百度网盘手机App，操作更方便哦

这里再介绍一款html5播放器--01

官方网站：http://www.52player.cn/ 有视频播放器、音频播放器、图片播放器

酷播云 (标准代码演示)：http://52player.cn/Demos/CloudPlayer/demo01.html

酷播云 HTML5 标准代码：

<script src='//player.polyv.net/script/polyvplayer.min.js'></script>
<div id='plv_e785b2c81c9e018296671a1287e99615_e'></div>
<script>
var player = polyvObject('#plv_e785b2c81c9e018296671a1287e99615_e').videoPlayer({
'width':'600',
'height':'337',
'vid' : 'e785b2c81c9e018296671a1287e99615_e' ,
'forceH5':true
});
</script>

演示效果图：

这里再介绍一款html5播放器--02

ckplayer - 超酷网页视频播放器

官方网站：http://www.ckplayer.com/

使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

一、video的js知识点：

controls(控制器)、autoplay(自动播放)、loop(循环)==video默认的；

自定义播放器中一些JS中提供的方法和属性的记录：

1、play()控制视频的播放

2、pause()控制视频的停止

3、currentTime控制视频的当前时间

4、muted控制视频是否静音(赋值true or false)

5、volume控制音量的大小(赋值0-1)

6、duration视频的总时间

7、ontimeupdate事件(当前播放位置改变时执行，使用时要绑定addEventListener)

8、requestFullscreen全屏

二、全屏API介绍

浏览器全屏API简史

1、第一个实现浏览器原生全屏API的是在Safari 5.0（和iOS）中添加的webkitEnterFullScreen()函数，不过它只能在Safar的<video>标签的controls中。

2、在Safari 5.1中，苹果更新了这个API使它更接近于Mozilla的全屏API草案(实际上这要比苹果实现的更早)，现在，所有的DOM元素都可以调用webkitRequestFullScreen()函数使HTML页面进入到全屏模式。

3、Firefox和Chome宣布它们将会添加原生的全屏API支持，而且这个特性已经在Chome 15+以及Firefox10+中实现,Mozilla团队已经发布了一些。

4、在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

Mozilla/Webkit使用大写字母’S'（FullScreen），但W3C则不是（Fullscreen）
Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen

5、更新 (11/15/2011)：来自IEBlog的Ted Johnson说IE10将不会支持全屏API (12/05/2011: 我对Ted的第一封email理解错了)IE10的开发团队还没有决定是否要实现全屏API。不过，他指出：Win8的 Metro风格的Internet Explorer始终是全屏状态，正如以前那样，按F11键即可进入全屏模式。

浏览器全屏API

要进入全屏模式，可以调用需要进入全屏元素的requestFullScreen（或者W3C的 requestFullscreen）方法。。要退出全屏，则调用document对象的cancelFullScreen（或者W3C的exitFullscreen）方法。

代码：

全屏

var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen){

docElm.requestFullscreen();

}
//FireFox
else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen();

}
//Chrome等
else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen();

}
//IE11
else if (elem.msRequestFullscreen) {

elem.msRequestFullscreen();

}

退出全屏

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

监听是否全屏

document.addEventListener("fullscreenchange", function(){

fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);

document.addEventListener("mozfullscreenchange", function () {

fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);

document.addEventListener("webkitfullscreenchange", function () {

fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);

document.addEventListener("msfullscreenchange", function () {

fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

全屏是的样式设置

html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}

https://www.cnblogs.com/duanlianjiang/p/5557015.html

其他资料

video.js使用技巧

一款开源免费跨浏览器的视频播放器--videojs使用介绍

在网站中嵌入VideoJs视频播放器

在网站中使用VideoJs视频播放器播放视频相关推荐

使用xgplayer视频播放器播放视频时不显示总时长
在项目中使用到了xgplayer来播放视频,官方演示是可以显示总时间的,但自己使用不显示分析: 首先,打开控制台看看是不是没有总时长这个标签找到原因了,不是没有总时长,而是把他显示成块级元素换行了 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
如何使用JiaoZiVideoPlayer(饺子视频播放器)播放avi格式的视频
如何使用JiaoZiVideoPlayer(饺子视频播放器)播放avi等原生不支持的格式的视频 1.为什么使用JiaoZiVideoPlayer播放AVI格式的视频有的同学可能会发现,部分.avi文 ...
vue引入video视频播放器（视频调用代码范例）
vue引入video视频播放器(视频调用代码范例) VUE视频调用代码范例1: <template><div><div id="player"> ...
Html5结合flash在所有主流播放器播放视频的方法
转自http://www.aimks.com/html5-combined-with-flash-method-in-all-mainstream-video.html Html5结合flash在所有 ...
解决Android7.0系统调用系统相机、系统播放器播放视频、切图兼容问题，报异常android.os.FileUriExposedException
原文地址:https://blog.csdn.net/msn465780/article/details/59058088?locationNum=8&fps=1 Android7.0以前获取 ...
【VideoJs】初识videojs video.js 视频播放器的基本使用 videojs基础用法 videojs视频播放器 vue3中使用videojs
videojs介绍免费,开源插件多可自定义 [推] 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧相比之下,我还是强烈推荐 [Xgp ...
【uni-app】H5中使用videojs播放器播放视频
前言 uni-app 项目中,uni-app提供的video控件对H5的兼容性不好(该控件的主要使用目标是小程序). H5中使用videojs播放器替换video控件 videojs播放器在uni-a ...
vue中使用 vue-dplayer视频播放器实现hls播放
1.安装依赖 npm install vue-dplayer -S 2.在mian.js里引入并使用 import VueDPlayer from "vue-dplayer"; i ...

在网站中使用VideoJs视频播放器播放视频