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

最新推荐文章于 2024-09-11 10:51:53 发布

zgphacker2010

最新推荐文章于 2024-09-11 10:51:53 发布

阅读量7.9k

点赞数 2

分类专栏： Java Web 综合文章标签：网页视频播放器 Video.js

原文链接：http://www.jq22.com/jquery-info404

版权

Java Web 综合专栏收录该内容

27 篇文章 0 订阅

订阅专栏

之前使用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 inherited
  
var 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();