html vedio api,video.js web网页播放器基础api使用

原标题：video.js web网页播放器基础api使用

文件引入：

< src="//vjs.zencdn.net/7.0/video.min.js">>

html:

poster="http://www.jq22.com/demo/video-js/m.png" data-setup="{}">

style:

/*显示暂停按钮*/

.vjs-paused .vjs-big-play-button,

.vjs-paused.vjs-has-started .vjs-big-play-button {

display: block;

}

/*//按钮圆形*/

.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;

}

/*点击屏幕播放/暂停*/

.video-js.vjs-playing .vjs-tech {

pointer-events: auto;

}

/*进度显示当前播放时间*/

.video-js .vjs-time-control{display:block;}

.video-js .vjs-remaining-time{display: none;}

java ：

var player = videojs('my-video');

var options = {};

var player = videojs('my-video', options, function onPlayerReady() {

videojs.log('Your player is ready!');

// In this context, `this` is the player that was created by Video.js.

this.play();

// How about an event listener?

this.on('ended', function() {

videojs.log('Awww...over so soon?!');

});

//设置播放进度：

player.currentTime(6);

//获取播放进度：

var whereYouAt = player.currentTime();

//console.log(whereYouAt);

//声音大小(0-1之间)

var howLoudIsIt = player.volume();

player.volume(0.5);

责任编辑：