运行环境

支持w3c标准且支持webGL 3D渲染引擎的浏览器，如微信、微博、qq等app等部分主流app

旗舰版使用说明：

在第三方前端框架vue，react，nuxt.js 中使用,需要注意如果出现js 404加载失败时，可设置第四个参数设置播放器js加载目录。

例如：

import { Player, MX } from "../../public/js/player/mxplayer.js";

window.MX = MX; window.Hls = require("hls.js"); // hls.js 或flv.js 必须使用这样的全局方式，否则会出现Hls未定义错误提示

mounted() {

    var loadPath='/js/player/';

    var player = new Player(containerId, width, height, path, onInit, options);

}

在原生 script中使用

打开调试日志信息，部署时请关闭该设置

// window.__mxdebug__ = 2;// 0-不显示日志 1-显示core日志 2-显示所有日志

初始化播放器

window.onload = function () {

播放器初始化完成回调，代表下载器、解析器、播放器、video对象等等已经初始化完成

var onInit = function () {

如下可设置播放器初始化视频poster图片或者直接调用则是显示全景图

player.poster('/video/puydesancy.jpg', 'sphere',options);

}

var player = new Player("playCanvas",null,null,null,onInit,options);

Player(containerId, width（可选）, height（可选）, path（可选）, onInit(可选),options(可选)) ，如果播放器plugin文件地址获取错误可以强制指定第四个参数，类似Player('playCanvas', 400, 200,'/path/to/lib/')，第五个参数是onInit初始化完成回调，第六个为播放器其他初始化参数（可选）,

options初始化参数： { 'bg': '#1b1212', 'toolbar_bg': 'rgba(255,255,255,0.2)', 'toolbar_color': '#fff', alpha: false, antialias: false, 'container_font_size': '16px' }; bg播放器未播放时的背景，toolbar_bar:播放器工具栏背景，toolbar_color：播放器工具栏字体颜色

用户点击左下角播放按钮触发播放，则视频播放方法写在playBtnClick 方法回调中（注意：该方法只会第一次回调）也就是player.isFirstPlay为true时回调，当playBtnClick回调完成一次之后isFistPlay自动会设置为false。之后点击则不再回调，只处理播放暂停逻辑。

如果需要切换视频自定义播放，则播放视频方法（下面有说明）不能写在playBtnClick回调方法内，因为只要调用播放方法isFistPlay就会设置为true，用户点击工具栏播放按钮会再回调播放一次。同时如果需要播放视频还需调用player.video.play()才能开始播放视频，因为视频播放video.play()方法是点击工具栏播放按钮才会触发。

player.playBtnClick = function () {

}

player.onPlaying=function(){} 播放中回调

player.onPausing=function(){} 暂停中回调

播放参数说明：

[url] 参数为播放地址或直播地址

[shape] 参数就是指定播放类型，有”plane”平面视频和“sphere” VR视频，“cubemap”天空盒子几种模式，player._playModes可查看支持类型

[muted] 参数控制是否静音

[isStream] 参数控制是否为直播流，true/false

[waitHeaderLength] 每次下载包大小，为null时使用默认大小

[streamType]为软解播放流的类型，有'flvStream'和'hlsStream'，可以使用 player._streamTypes查看

[poster] 视频加载预览图

[options]={ scale: { x: 0, y: 0, full: 0 }, anaglyphMode: false, autoplay:true },可通过player._playOptions查看所有参数。

[scale].xy为自定义视频开始渲染位置，取值范围区间(0-1]，scale.full 表示是否宽高100%填充播放器，0/1。

[anaglyphMode] 表示是否立体视频模式，（立体电影也叫红蓝3D电影，需要佩戴红蓝3D眼镜，效果类似real 3d,iMax电影，scale/anaglyphMode只能在平面视频（plane）中生效，全景视频（sphere/cubemap）没有该效果）.

[autoplay]: true/false 是否自动播放（部分设备需要开启静音视频才会自动播放）

视频播放方法：

1、【硬解】播放网络视频地址,该方法url支持websocket协议

player.playVideo(url, shape, muted, isStream,options);

2、【硬解】播放flv 直播流，iphone设备可能不兼容，但是相比于play方法软解性能要好，该方法url支持使用websocket协议

player.playFlv(url, shape, flvCfg/* flv.js 初始化配置 */, muted, isStream, options)

// 该方法需要引用flv.js库 3、【硬解】播放hls流

player.playHls(url, shape, muted, isStream,options);

// 该方法需要引用hls.js库 4、【硬解】播放原始视频

player.playOriginal(url, muted, poster, isStream,options);

5、【软解】播放hls直播流、播放flv、播放ts、播放h265。play方法使用的解码方式为纯软解，兼容性好，可在所有设备解码flv格式和h265编码，但是性能不是很好，h264不超过2k，h265不超过720p解码流畅，目前主要适合用于平面视频播放。VR视频高分辨率和码率的话可能需要牺牲清晰度换取流畅度和部分设备兼容问题。如果需要兼顾性能和兼容性，前端需要根据设备类型切换调用方法，比如iphone无法解码flv，需要调用play进行软解，但是android和pc设备支持flv.js 配合video硬解码，因此调用playFlv方法
@param url 播放地址 *
@param isStream 是否为数据流 *
@param shape 播放类型，player._playModes可查看类型型,[plane,sphere,cubemap] *
@param streamType 流类型,player._streamTypes可查看支持类型; *
@param opti { 'hlsLive': true,'hlsHost':null }
当opti的hlsLive=true时，hls流会在第一次请求m3u8文件获取视频TS时自动选择最后的ts分片进行播放，如果不是实时的hls直播流则应该设置hlsLive=false或不设置，该功能和MX.decoderHlsCfg.flushTs = true的作用一致,设置只生效一次，成功执行之后自动失效
多码率适配流：如果需要多码率适配，则可以通过设player._hls.masterPlaylistIdx=? 来设置，默认0则会去请求masterPlaylist列表里的第一个流，多码率流列表信息保存在player._hls.masterPlaylist 当自动解析的流地址不是标准地址时可能会出现访问ts文件404，这时可以通过设置hlsHost,播放器将会访问hlsHost+ts文件名称 地址。

player.play(url, isStream, shape,streamType,options)

6、【自定义解码器】能否使用需要看所使用的库是否能够获取video对象，将第三方解码器的video对象指向player.video=video完成绑定，再调用playVideo方法播放，否则无法使用，例如： var flvPlayer = flvjs.createPlayer(); flvPlayer.attachMediaElement(player.video); flvPlayer.load(); player.rebindVideoEvt();// 重新绑定video事件监听 player.playVideo(url, shape, muted, true,options); 如果使用的不是软解方法，可使用原始方法获取和操作video对象 player.video.play(); 7、【webrtc直播】

player.playWebRtc(adapter, shape, muted,isStream, options);

8、【webrtc推流】 // url:例如 webrtc://domain:443/live/livestream

player.player.publishWebRtc(adapter, constraints, options);

当准备完成开始推送，player.webRtcPublished回调方法将被触发 全景图 下面两个方法等价，都是显示全景图或者普通图片，可用作于视频初始化poster图，当调用视频播放方法后会自动切切换为视频播放，无需额外操作

player.poster('/path/to/puydesancy.jpg',shape,options);

player.picture('/path/to/puydesancy.jpg', shape,options);

改变播放器宽高：

player.setSize(width,height)

自定义平面视频在播放器中的缩放比例：

MX.planeVideoCfg.scale={x:1,y:1};

x和y的范围在区间(0-1]内，x=1为视频铺满播放器宽，y=1为视频铺满播放器高，默认则是自动保持原始视频宽高比进行缩放,如果视频宽高都小于播放器宽高，但是想以长宽等比例按最长边最大化放大，则只需要设置scale.full=1,注意！如果x，y的优先级比full高，所以如果需要full生效，则scale.x和scale.y不能设置。

多个播放器切换

如果一个页面有多个播放容器，那么需要再用户操作某个容器时重新new Player(containerID)即可，流程和初始化一个一致，播放器渲染会切换到当前容器渲染并销毁其他容器，可灵活方便定义多个容器进行播放，注意：不支持同时渲染多个容器。

摄像机轨道控制器,需要在开始播放方法后调用， options={}

设置播放器镜头自动旋转（该功能需要在调用播放函数之后设置！）

options.autoRotate=true

设置自动旋转速度为1.2

options.autoRotateSpeed=1.2

开启设置拖动惯性：默认关闭

optionsenableDamping=true;

设置惯性动量，数值越大惯性越大（默认0.05）

options.dampingFactor=0.05;

设置拖动旋转速度，数值越大拖动灵敏度越大,默认0.05,开启惯性状态下为0.25

options.rotateSpeed=0.05;

player.onOrbitCtlReady = function () {

player.setOrbitCtl(options);

}

陀螺仪,（注意）开启点击陀螺仪并同意授权后才会生效

关闭陀螺仪

player.disableGyro();

开启陀螺仪

player.enableGyro();

回正初始视角

player.resetOrbitCtl();

设置播放器背景清除色：

player.setClearBg(r, g, b);

如果需要自定义处理视频事件，可以获取当前h5Video对象player.video，该对象继承了所有video对象的属性和事件（注意，如果是软解操作则不使用video对象，故不会触发任何video对象的事件，设置video属性也不会起到作用！）

截屏

player.takeScreenShot(function (base64Img) {})

也可以使用下面是几个常用播放器事件回调使用例子，软解时不会所有回调方法都触发，下方将使用【软】标注软解回调方法

播放回调

播放设置

设置音量

player.setVolume(0.2);

获取所有的工具栏按钮对象

player.toolBar

开启全屏,自动判断当前状态，全屏/退出全屏

player.fullscreen()

修改播放器加载中图标

MX.playerLoading.innerHTML=””;

显示加载中：

player.showLoading();

隐藏加载中

player.hideLoading();

销毁播放器对象

player.destroy();

获取当前FPS

player.fps

兼容问题：

1、处理老机型兼容问题，部分较老的机型不支持web Worker或不支持wasm会出现无法初始化，导致播放失败，可以通过new Player 之前设置全局参数MX.disableWASM=true;这样播放器可以正常初始化来兼容一些设备，该操作只适用于支持video硬解码授权的设备，disableWASM=true后软解play 方法将无法使用，包括flv直播流，h265、ts、h264软解等操作，所以需要判断设备型号区分使用

2、部分android 机在播放的时候会报Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded. 这种情况可以设置 MX.forceHls=true 在播放playBtnClick 调用之前即可. 注意：不能所有设备都启用改选项，必须得在有问题得设备中添加条件判断使用，Hls.isSupported() ==true 且不能正常播放设备userAgent区分之后才能使用，在不支持hls的设备设置的forceHls是无效的 例如：在android和支持Hls.js 库得设备启用

其他备用选项：MX.enableHls,MX.enableAppleMpeg,MX.enableXMpeg,这几个都是配置是否启用对应的设置，默认都为TRUE， 例如当video.canPlayType('application/vnd.apple.mpegurl')和video.canPlayType('application/x-mpegURL') 都支持时，MX.enableAppleMpeg,MX.enableXMpeg两个选项可显式配置选则使用那种方式，而不是使用默认。

if(navigator.userAgent.toLowerCase().match(/android/i) && Hls.isSupported()){

MX.forceHls=true;

}

// 例如：在uni-app或不支持hls.js 库得设备不启用

if(navigator.userAgent.toLowerCase().match(/uni\-app/i)) || !Hls.isSupported()){

MX.forceHls=false;

}

3、一部分android设备的QQ浏览器,UC浏览器无法Hls直播播放的情况下，可以尝试强制启用MX.forceHls=true;

注意：

1、陀螺仪使用需要https支持

2、服务器资源/直播流如果不在同一个域（a.baidu.com,b.baidu.com,a.baidu.com:8080这都属于不是同一个域）下，则需要资源/流服务器设置允许跨域请求

3、视频编码一般使用h264/h265编码,YUV存储格式使用yuv444p,yuv422p,yuv420p,yuv420sp,yuv422sp,yuvj420p，以及rgb24格式，音频一般使用aac编码