Video.js 视频播放器集成与 API 使用指南

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

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="external nofollow" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

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

<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="https://www.jb51.net/视频地址格式1.mp4" type='video/mp4' />
  <source src="https://www.jb51.net/视频地址格式2.webm" type='video/webm' />
  <source src="https://www.jb51.net/视频地址格式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>

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

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

<a videohref="//www.jb51.net/xxx.mp4" class="video_link"><img src="../images/xxx.jpg"/></a>

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