视频播放器 ios+安卓都可用

段鹏举 · 发表于 2015-9-1 02:51:46

本帖最后由段鹏举于 2015-11-17 14:53 编辑

1.到这个网站下载最新版5.0.0，https://github.com/videojs/video.js/blob/stable/docs/index.md，不要用cdn版本的，因为后面要修改插件代码。
然后引入文件
<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
<script src="//example.com/path/to/video.min.js"></script> 然后引入video标签
<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"  poster="http://video-js.zencoder.com/oceans-clip.png"  data-setup='{"example_option":true}'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video> width height可以去掉，后面用js加。poster就是封面图，可以用流浪大哥写过的教程，用canvas生成一个。source就是资源，格式自选。 p标签可以删掉。
2.这个时候用chrome预览发现播放器就已经能用了。但是在apicloud真机同步后就发现，安卓机没有图像，只有声音，苹果机点击播放就自动跳到系统播放器了。。
  播放视频的网页只能用openframe方法打开，才能解决安卓机的问题，试了，果然是。
  我的代码：var $winWidth=api.winWidth;
      var $winHeight=api.winHeight;
      var $i=$winHeight/$winWidth;
      var h=$winWidth/$i;
api.openFrame({
         name: 'learninfo-videoframe',
         url: '../html/learninfo-videoframe.html',
         bounces:false,
         vScrollBarEnabled:false,
         rect: {
                  x:0,
                  y:0,
                  w

winWidth,
                  h:h,
         }
});
3.苹果机的问题可以在video标签里添加属性webkit-playsinline解决，但是无法解决点击全屏按钮会自动跳到系统播放器，安卓机没反应。
我的代码：<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
   poster="http://video-js.zencoder.com/oceans-clip.png "
   data-setup="{}"  webkit-playsinline>
<source src="http://7o50kb.com2.z0.glb.qiniucdn.com/kuaisu3.mp4" type='video/mp4'></source>
  </video>
4.感觉苹果机用自带播放器全屏播放页挺好看的。。。就将就着来吧。至此只剩下安卓机全屏的问题。百度了很多资料，好像我们要解决的不是全屏，而是移动设备要旋转并且放大才对吧。于是。。。
我修改了video.js的源码，增加了一个点击全屏按钮的事件。8983行
Player.prototype.requestFullscreen = function requestFullscreen() {
  api.sendEvent({
name: 'full',
});
      var fsApi = _fullscreenApiJs2['default'];
this.isFullscreen(true);

if (fsApi.requestFullscreen) {
   // the browser supports going fullscreen at the element level so we can
   // take the controls fullscreen as well as the video

   // Trigger fullscreenchange event after change
   // We have to specifically add this each time, and remove
   // when canceling fullscreen. Otherwise if there's multiple
   // players on a page, they would all be reacting to the same fullscreen
   // events
   Events.on(_globalDocument2['default'], fsApi.fullscreenchange, Fn.bind(this, function documentFullscreenChange(e) {
      this.isFullscreen(_globalDocument2['default'][fsApi.fullscreenElement]);

      // If cancelling fullscreen, remove event listener.
      if (this.isFullscreen() === false) {
      Events.off(_globalDocument2['default'], fsApi.fullscreenchange, documentFullscreenChange);
      }

      this.trigger('fullscreenchange');
   }));

   this.el_[fsApi.requestFullscreen]();
} else if (this.tech.supportsFullScreen()) {
   // we can't take the video.js controls fullscreen but we can go fullscreen
   // with native controls
   this.techCall('enterFullScreen');
} else {
   // fullscreen isn't supported so we'll just stretch the video element to
   // fill the viewport
   this.enterFullWindow();
   this.trigger('fullscreenchange');
}
return this;
  };

同时在视频的frame页面加入监听
      api.addEventListener({
name: 'full'
}, function(ret){
api.setFrameAttr({
name: 'learninfo-videoframe',
rect:{
      x:0,
      y:0,
      w:'auto',
      h:'auto'
},
bounces: false,
vScrollBarEnabled:false,
hScrollBarEnabled:false
});
var el=$api.byId('myvideo');
$api.addCls(el, 'fullscreen');
      var hh=api.winHeight;
      var ww=api.winWidth;
      var myPlayer = videojs('example_video_1');
myPlayer.width(hh);
myPlayer.height(ww);
});

我的思路是，先让frame充满屏幕，再让包着video标签的div旋转90度，再设置video的宽等于frame的高，高等于frame的宽。
.fullscreen{
-moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

发现就可以了！！！点击全屏后，不会启动系统播放器，而是让video.js播放器旋转90度至全屏，controls面板也都正常，想要的结果就实现了。

离开全屏的思路刚好反着，直接上源码。9034行
  Player.prototype.exitFullscreen = function exitFullscreen() {
         api.sendEvent({
name: 'exitfull',
});
var fsApi = _fullscreenApiJs2['default'];
this.isFullscreen(false);

// Check for browser element fullscreen support
if (fsApi.requestFullscreen) {
   _globalDocument2['default'][fsApi.exitFullscreen]();
} else if (this.tech.supportsFullScreen()) {
   this.techCall('exitFullScreen');
} else {
   this.exitFullWindow();
   this.trigger('fullscreenchange');
}

return this;
  };

frame监听代码：
api.addEventListener({
name: 'exitfull'
}, function(ret){
      var $winWidth=api.winWidth;
      var $winHeight=api.winHeight;
      var $i=$winHeight/$winWidth;
      var h=$winWidth/$i+20;
api.setFrameAttr({
name: 'learninfo-videoframe',
rect:{
      x:0,
      y:0,
      w

winWidth,
      h:h
},
bounces: false,
vScrollBarEnabled:false,
hScrollBarEnabled:false
});
var el=$api.byId('myvideo');
$api.removeCls(el, 'fullscreen');
      var h=api.frameHeight;
      var w=api.frameWidth;
      var myPlayer = videojs('example_video_1');
myPlayer.width(w);
myPlayer.height(h);
});

思路是：先让frame变回原来的大小，再让包着video标签的div旋转回去，再设置video的宽高至正常。