西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

插件

西瓜视频播放器主张一切设计都是插件，小到一个播放按钮大到一项直播功能支持。想更好的自定义播放器完成自己业务的契合，理解插件机制是非常重要的，播放器本身有很多内置插件，比如报错、loading、重播等，如果大家想自定义效果可以关闭内置插件，自己开发即可。

默认情况下插件是自启动的，如果自定义插件不想自启动或者不想改变播放器默认的执行机制，建议以继承播放器类的方式开发。

内置插件

play

控制条的播放/暂停按钮，不建议改动。源码

time

控制条的当前时间/视频时长显示组件，可以自定义。源码

volume

控制条的音量控制组件，不建议改动。源码

definition

控制条的清晰度切换组件，不建议改动，事件驱动满足任意形式的实现。源码

fullscreen

控制条的全屏切换组件，不建议改动。源码

poster

播放器贴图，不建议改动。源码

progress

播放器进度条和预览图，不建议改动。源码

loading

播放器加载提示，可以自定义。源码

error

播放器错误提示，可以自定义。源码

replay

播放器重播操作界面，可以自定义。源码

playbackRate

播放器倍速播放，不建议改动。源码

makeBullet

播放器弹幕，不建议改动。源码

textTrack

播放器外挂字幕，不建议改动。源码

pip

播放器画中画功能，不建议改动。源码

cssFullscreen

控制条的网页样式全屏切换组件，icon可以自定义。源码

screenShot

播放器内部截图，截图格式可以自定义。源码

playNext

播放器跳转播放下一集，不建议改动。源码

rotate

播放器旋转控件，可以自定义。源码

download

播放器下载控件，可以自定义。源码

localPreview

播放器预览本地视频功能，不建议改动。源码

i18n

播放器多语种定义，不建议改动，通过配置项增加其他语言。源码

pc

播放器PC交互定义，包括进场动画。源码

mobile

播放器mobile交互定义，包括进场动画。源码

自定义插件

  1. 开发插件
// pluginName.js
import Player from 'xgplayer';

let pluginName=function(player){
  // 插件逻辑
}

Player.install('pluginName',pluginName);
  1. 使用插件
import Player from 'xgplayer';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4'
})

功能插件列表

播放器提供了常用功能的插件，比如 hls 直播(点播)、flv 直播(点播)、mp4 流式点播、dash 点播。

xgplayer-mp4

ios系统不支持该插件 对普通mp4视频的解析器，能实现播放器对缓冲、预加载的控制、精确的seek加载、视频的无缝切换 (播放器清晰度切换配置详见清晰度切换配置)、流量节省。。使用方式如下：

import 'xgplayer';
import Mp4Player from 'xgplayer-mp4';

let player = new Mp4Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4',
  maxBufferLength: 10 // 设置最大缓冲区时长，默认5秒
})

在线代码运行示例

注意

使用该插件需要配置CORS，video本身是支持跨域的，但是我们是通过 Javascript 来加载视频的，所以会有跨域的问题而且我们为了实现精确加载使用 Range 会触发 CORS 的 options 请求，所以在视频资源要配置好 CORS。参考资料：Nginx通过CORS实现跨域，如果使用的是 CDN，请联系对应的 CDN 厂商进行配置，很简单的哟。

这个插件是自动执行的，对于不支持的浏览器会自动降级。

xgplayer-hls

ios系统不支持该插件

对于hls协议的点播(直播)可以使用该插件完成，这个插件没依赖任何第三方代码完全自主实现，从解m3u8文件到ts文件。优点是代码结构清晰、比hls.js轻量很多、官方维护。缺点是兼容性有瑕疵，没有按hls标准的视频可能会无法播放。

import 'xgplayer';
import HlsPlayer from 'xgplayer-hls';

let player = new HlsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.m3u8'
})

在线代码运行示例

xgplayer-hls.js

对于hls协议的点播(直播)可以使用该插件完成，该插件是对hls.js的封装，力求稳定的同学可以使用该插件。

import 'xgplayer';
import HlsJsPlayer from 'xgplayer-hls.js';

let player = new HlsJsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.m3u8',
  //isLive: true, //直播场景设置为true
  //useHls: true,
  //hlsOpts: {
  //  xhrSetup: function(xhr, url) {
  //    xhr.withCredentials = true;
  //  }
  //} //hls.js可选配置项
})

注意

移动端原生video支持直接播放hls，所以xgplayer-hls.js在移动端环境下关闭了hls.js相关解析功能；如果需要在移动端环境下打开hls.js解析功能，可使用配置项 useHls: true

在线代码运行示例

xgplayer-hls.js插件在xgplayer播放器基础配置的基础上还具有一些hls.js专属配置项，请参考 hls.js配置。

xgplayer-flv

ios系统不支持该插件

对于flv协议的点播(直播)可以使用该插件完成，这个插件没依赖任何第三方代码完全自主实现。优点是代码结构清晰、比flv.js轻量很多、官方维护。

import 'xgplayer';
import FlvPlayer from 'xgplayer-flv';

let player = new FlvPlayer({
  id: 'xg',
  url: './xgplayer-demo.flv',
  poster: './poster.png',
  isLive: false,
  preloadTime: 30,
  minCachedTime: 5,
  cors: true
})

在线代码运行示例

xgplayer-flv插件在xgplayer播放器基础配置的基础上还具有一些可选的特殊配置项。

配置项含义默认值
isLive是否直播false
preloadTime预加载时长(秒)30
minCachedTime当前播放时间距离已缓存资源片段结束点剩多长时间时开始请求新片段(秒)5
cors请求是否跨域true

xgplayer-flv.js

ios系统不支持该插件

对于flv协议的点播(直播)可以使用该插件完成，这个插件依赖flv.js。

import 'xgplayer';
import FlvJsPlayer from 'xgplayer-flv.js';

let player = new FlvJsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.flv',
  //isLive: true, //直播场景设置为true
  hasVideo: true,
  hasAudio: true,
  flvOptionalConfig: {
    enableWorker: true
  } //flv.js可选配置项
})

在线代码运行示例

xgplayer-flv.js插件在xgplayer播放器基础配置的基础上还具有一些flv.js专属配置项，请参考 flv.js配置。

注意

xgplayer-flv和xgplayer-flv.js插件在请求跨域视频源时需要视频源端带range服务。

xgplayer-logger

xgplayer为常用的几种站点统计方式(cnzz, baidu, gtag, raven)提供了数据配置接口，用户可选择其中某种统计方式在播放器事件发生时上报所需数据。

import Player from 'xgplayer';
import 'xgplayer-logger';

let player = new Player({
  id: 'xg',
  url: './xgplayer-demo.mp4',
  loggers: [{
   type: 'cnzz', // 'cnzz' | 'baidu' | 'gtag' | 'raven'
   options: { //以下为默认值，可以传入以覆盖
     category: 'video',
     actions: { // 覆盖事件触发时的action
         error: 'error',
         complete: 'complete',
         play: 'play',
         pause: 'pause',
         end: 'end',
         ready: 'ready',
         seek: 'seek',
         unload: 'unload'
     },
     label: player.config.url, // label 的值
     value: { // 上报的数据
         error: (player) => player.currentTime,
         complete: (player) => player.currentTime,
         play: (player) => player.currentTime,
         pause: (player) => player.currentTime,
         end: (player) => player.currentTime,
         unload: (player) => player.currentTime,
         seek: (player) => player.currentTime,
         ready: (player) => player.currentTime
     }
   }
 }]
})

注意

播放器核心包和插件都使用 babel 编译到 ES5。