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

之前使用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的草案有两个主要的不同点:

  1. Mozilla/Webkit使用大写字母’S'(FullScreen),但W3C则不是(Fullscreen)
  2. 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视频播放器

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页