首页 VR播放器问题反馈小组 文章 用户 唠叨 搜索 我的社区
全部

酷视网页视频播放器sdk使用说明文档

admin
发表于 2021-06-11 17:08:05

产品使用说明书

 

运行环境

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

 

探索版使用说明

<script src="./build/mxreality.js"></script>

<div id='example'></div>

<script>

    container=document.getElementById('example')

    renderer = new THREE.WebGLRenderer();

    container.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    var vr=new VR(scene,renderer,container);

    vr.init(function(){

            

    })

    vr.playPanorama('视频或直播流地址',<vrType>);

 

播放类型如下

vr.resType = {

            "plugin": "plugin", // 插件模式

            "video": "video", // 网络视频地址播放

            "box": "box", // 全景图天空盒子

            "fixedImage": "fixedImage", // 全景图-带修复模式

            "videoSlice": "videoSlice", // 全景hls直播

            "normal2d": "normal2d", // 普通视频模式播放

            "normal2dSlice": "normal2dSlice", // 普通视频模式直播流

            "normal2dImage": "normal2dImage", // 普通图片显示

            "flvVideo": "flvVide", // flv全景直播模式

            "flv2dVideo": "flv2dVideo", // 普通视频模式 flv直播流

            "cinema": "cinema", // 影院模式

            "flvCinema": "flvCinema", //影院模式flv直播

            "hlsCinema": "hlsCinema",//影院模式hls直播

}

获取方法例如直播hls则resType为vr.resType.videoSlice或直接字符串 “videoSlice”

 

在全景播放前面定义资源加载状态回调方法:

//全景资源加载完成回调

vr.loadProgressManager.onLoad(xhr){

    console.log("loaded");

}

//全景资源加载中回调

vr.loadProgressManager.onProgress(item, loaded, total){

    console.log("item=",item,"loaded",loaded,"total=",total);

}

//全景资源加载错误回调

vr.loadProgressManager.onError(xhr,cl) {

    console.log(xhr,cl);

}

自动旋转

设置播放器镜头自动旋转

vr.controls.autoRotate=true

 

设置自动旋转速度为1.2

vr.controls.autoRotateSpeed=1.2

陀螺仪

关闭陀螺仪

vr.controls.gyroFreeze()

 

开启陀螺仪

vr.controls.gyroUnfreeze()

 

 

几个播放器对象

Vr.video对象为播放器视频对象支持原始所有video方法和事件

Vr.toolBar 对象包含了所有的工具栏按钮对象

 

 

 

</script>

 

旗舰版使用说明

<script type='text/javascript' src="path/to/mxplayer.js"></script>

 

<!--以下两个库按需引入如果为软解码则无需引入下面两个库是否需要判断看后面播放方法说明-->

<!------------------------------按需引入begin---------------------------------------->

<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.0.2-0.canary.7189/hls.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>

<!------------------------------按需引入end---------------------------------------->

 

<div class="container" id="videoPlayer">

<div id="playCanvas" style="width: 100%;max-width:600px;height: 400px;"></div>

</div>

<script type='text/javascript'>

window.onload = function () {

var player = new Player("playCanvas");

 

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

player.onInit = function () {

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

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

}

用户点击左下角播放按钮回调根据播放需求可调用如下7中方式调用播放方法

player.playBtnClick = function () {

 

播放参数说明:

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

shape参数就是指定播放类型,有plane平面视频和sphere VR视频两种模式

muted参数控制是否静音

isStream 参数控制是否为直播流

waitHeaderLength 每次下载包大小,为null时使用默认大小

streamType为软解播放流的类型,有'flvStream''hlsStream',可以使用 player.streamTypes查看

 

1、播放网络视频地址

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

 

2、播放flv 直播流ios设备可能不兼容但是相比于play方法软解性能要好

player.playFlv(url, shape, muted, isStream);  // 该方法需要引用flv.js

 

3、播放hls流

player.playHls(url, shape, muted, isStream);  // 该方法需要引用hls.js

 

4、播放原始视频

player.playOriginal(url, shape, muted, isStream);

 

 

5、播放hls直播流播放flv播放ts、播放h265。play方法使用的解码方式为纯软解兼容性好可在所有设备解码flv格式和h265编码但是性能不是很好如果需要兼顾性能和兼容性前端需要根据设备类型切换调用方法比如ios无法解码flv需要调用play进行软解但是android和pc设备支持flv.js 配合video硬解码因此调用playFlv方法

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

 

6、webRtc直播

绑定webrtc直播流

player.attachWebRTC(streamUrl, pullUrl, stopUrl);

播放直播流

player.playVideo('', 'plane', false, true);

 

7、自定义解码器使用能否使用需要看所使用的库是否能够获取video对象将第三方解码器的video对象指向player.video=video完成绑定再调用playVideo方法播放否则无法使用例如

var flvPlayer = flvjs.createPlayer();

    flvPlayer.attachMediaElement(player.video);

    flvPlayer.load();

    player.playVideo(url, shape, muted, true);

 

如果使用的不是软解方法可使用原始方法获取和操作video对象

player.video.play();

}

 

全景图

下面两个方法等价都是显示全景图或者普通图片可用作于视频初始化poster图当调用视频播放方法后会自动切切换为视频播放无需额外操作

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

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

 

多个播放器切换

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

 

自动旋转

设置播放器镜头自动旋转

vr.MXPlayer.orbitCtl.autoRotate=true

 

设置自动旋转速度为1.2

vr.MXPlayer.orbitCtl.autoRotateSpeed=1.2

陀螺仪

关闭陀螺仪

vr.MXPlayer.orbitCtl.gyroFreeze()

 

开启陀螺仪

vr.MXPlayer.orbitCtl.gyroUnfreeze()

 

}

</script>

 

908 0

评论
一周热门
一月热门
mxreality.js官方群