Js视频播放器插件Video.js使用方法详解

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

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

var videoObj = videojs(“videoId”);

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

myPlayer.play();

myPlayer.pause();

var whereYouAt = myPlayer.currentTime();

myPlayer.currentTime(120);

var howLOngIsThis= myPlayer.duration();

var whatHasBeenBuffered = myPlayer.buffered();

var howMuchIsDownloaded = myPlayer.bufferedPercent();

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

$(".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();