智汇云-企业数智化核心引擎

WEB播放器介绍

智汇云以SDK形式提供视频直播、点播播放器，可以帮助开发者快速实现视频播放能力。 WEB 播放器开发文档只包含了最终用户使用场景中的必要功能。其中360html5播放器支持MP4和HLS（m3u8）、FLV的视频播放功能，在使用本播放器之前，请确认已经登录智汇云平台获取播放器需要的各个配置项；

智汇云WEB 播放器内嵌了Html5和FLash两种播放和解码方式，能够根据用户实际平台支持程度选择，优先选择Html5模式播放；

关于Html5的特别提醒：

Html5的播放器的视频播放能力本身不是网页代码实现的，而是靠浏览器的支持，所以其兼容性并不像我们想象的那么好，所以必须要接受一个事实：不是所有的手机浏览器都能有符合预期的表现。另外，由于Hls协议特性决定在直播场景下大概会有一个20-30s的延时，目前来看在移动浏览器端暂时还没有其他更好的选择

WEB-Player播放器版本迭代

WEB-Player播放器特性

支持播放协议	支持内容
RTMP协议	Flash支持
http(s)-flv	Flash、H5支持
HLS（m3u8）	Flash、H5支持
http(s)-Mp4	Flash、H5支持

兼容特性

Flash播放内核如上特性全兼容；
Html5自研内核（兼容系统）播放时支持如下：

视频编码容器	支持程度
TS视频（M3U8）	chrome 23+, firefox 42+,safari 6(内置播放)
MP4	chrome All、firefox 21+，IE 9+，Edge 12+,safari 3.2+
FLV	chrome 23+,firefox 42+

WEB-Player播放器特性

播放功能	支持内容
播放体验	开始、暂停、停止、快进、快退、静音等基础播放器功能
播放屏幕	全屏、非全屏
数据打点	系统自动打点数据上报
解码标准	H.264、MPEG-4
多清晰度	支持（暂时可能存在缺陷）
其他功能	预调度、延时播放、封面图、动态loading、播放水印

播放器嵌入

SDK地址：https://live.360.cn/index/sdkdownload

播放器初始化：

CloudSDK.createPlayer(wrapperID, config)

config配置

配置项	支持内容
businessId	对应业务的bid例如：huajiao 从智汇云获取
channelId	对应业务的cid ，针对点播直播的服务名称，请通过是智汇云平台创建获取
vtype	replay或者liveplay。默认为 replay。
box	mp4、flv、hls
sessionId	对应用户的session 由使用方自行填写。
autoPlay	是否自动播放默认为true。
userId	用户的ID 此用户ID定义的目的是将业务方与智汇云SDK建立唯一的纽带，在追踪日志时方便沟通，具体的值智汇云不关心，保证唯一即可，一般为用户的ID。
coverImage	封面图片，不支持gif。
streamClarity	流清晰度 Array [{“src”:””, name:’普清’, default: true},{ “src”:””, name:’高清’},{ “src”:””, name:’超清’}]
customVolume	0-1的小数
customColor	修改皮肤颜色，如customColor=0x99fffff
stopLog	控制日志开启 true、false，默认是false
protocol	协议 http、https，默认是https

播放器调用方法：

主动方法	支持内容
getFullscreen	获取全屏状态
getPlayerStatus	获取播放器状态返回值：1：播放中、2：停止播放、3：缓冲中、4：暂停中、5：连接失败、6：播放失败。
duration	获取视频总时长
getVolume	获取音量
pause	暂停
resume	继续播放
currentTime	获取当前播放的事件
barLocked	锁定flash原生控制条事件 true显示false隐藏
barunLocked	解锁flash原生控制条事件 true显示false隐藏

被动方法	支持内容
onVolumeChange	音量改变回调
onFullScreenChange	是否全屏回调
onVideoLoading	缓冲比（返回0-100）
onPlayerEvent	事件回调，详情见下表

事件回调onPlayerEvent ：

参数	内容
volumechange	音量事件触发回调
fullscreenchange	全屏事件触发回调
loadedmetadata	加载媒体资源头部
progress	视频加载中
ended	视频播放完成
pause	视频暂停
play	视频播放
showbar	展示进度条
hidebar	隐藏进度条
control-clarity-change	清晰度切换
control-playbackRate-change	倍速改变
control-cut-screen	截图回调
control-preview	点击上一个
control-next	点击下一个

直播时示例配置：

直播时，系统根据businessId（bid）、channelId（cid）和SN能够确定唯一的视频流，发起直播之后传入业务自己发起的直播流SN，即可播放；

在线演示，调试地址：https://live.360.cn/static/html/player-demo.html；

<html>
<head>
    <title>播放器demo</title>
</head>
<body>
    <div style="width:740px;height:460px; position:relative;">
        <div id="player"></div>
    </div>
</body>
<script type="text/javascript">
    player = CloudSDK.createPlayer('player', {
        businessId:'yourbid',
        channelId:'yourcid',
        sn: '_LC_RE_non_3150469014781502031793300_SX',
        vtype :'vodplay',
        autoPlay: true,
        majorColor: '#57B0F6',
        children: {
            play: {
                icon: {
                    replay: `
                        <svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
                                <desc>Created with Sketch.</desc>
                                <defs></defs>
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="Artboard" transform="translate(-532.000000, -39.000000)" fill="#FFFFFF">
                                                <g id="重播-copy" transform="translate(513.000000, 20.000000)">
                                                        <path d="M35.4648098,19.0001517 C30.7324219,19.0113171 26.2336527,21.0626455 23.1161622,24.6305728 L23.1161622,23.1249781 C23.1161622,21.9859468 22.1948003,21.0626455 21.0581616,21.0626455 C19.921362,21.0626455 19,21.9859468 19,23.1249781 L19,29.3122983 C19,29.8592816 19.2168455,30.3839341 19.6028714,30.7708129 C19.9887767,31.1575305 20.5123272,31.3747921 21.0581616,31.3747921 L27.2324853,31.3747921 C28.369124,31.3747921 29.290486,30.4514908 29.290486,29.3122983 C29.290486,28.173267 28.369124,27.2499657 27.2324853,27.2499657 L26.3062563,27.2499657 C30.1461628,22.9724113 36.4213674,21.9114975 41.4491575,24.6894631 C46.4771084,27.4674288 48.9309094,33.3514696 47.3708367,38.8886576 C45.8107641,44.4256845 40.6481445,48.1546836 34.9129821,47.8873188 C29.1776588,47.6199943 24.383045,43.4266439 23.3425809,37.7683698 C23.3425809,37.2213865 23.1257354,36.696734 22.7398704,36.3100567 C22.3538042,35.9231778 21.8304146,35.7058759 21.2845802,35.7058759 C20.7387459,35.7058759 20.2151954,35.9231778 19.8291292,36.3100567 C19.4432642,36.696734 19.2264187,37.2213865 19.2264187,37.7683698 C20.4375113,46.5111943 28.3004623,52.7501494 37.070134,51.927135 C45.8398458,51.1041207 52.4099296,43.5104045 51.98006,34.6944204 C51.5503109,25.878396 44.2728547,18.962665 35.4648098,19.0001517 Z" id="重播"></path>
                                                </g>
                                        </g>
                                </g>
                        </svg>
                    `
                },
            },
            next: {
            },
            preview: {},
            progressTime: true,
            progressBar: true,
            volume: {},          
            clarity: [
                {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
                {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
                {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
            ],
            playbackRate: [
                {name: '1倍速', value: 1},
                {name: '0.5倍速', value: 0.5, default: true},
                {name: '2倍速', value: 2}
            ],
            cut: {
            },
            screen: true
        }
    });
</script>
</html>

可替换部分 icon & 自定义组件

controlbar: {
    play: {
        icon: {
            play: './icon/play.svg',
            pause: './icon/pause.svg'
        },
    },
    refresh: {
        tag: 'chimee-control-refresh',
        html: `
            <?xml version="1.0" standalone="no"?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                    <svg t="1504751056947" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2382" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
                        <defs>
                            <style type="text/css"></style>
                        </defs>
                        <path stroke="#ffffff" fill="#ffffff" stroke-width="40px" d="M1012.096 490.688l-148.48 148.48c-7.616 7.552-17.984 11.904-28.736 11.904s-20.992-4.288-28.736-11.904l-148.352-148.48c-15.808-15.872-15.808-41.536 0-57.472 15.872-15.872 41.472-15.872 57.472 0l78.976 79.168L794.24 512c0-196.608-159.808-356.48-356.48-356.48C241.216 155.52 81.216 315.392 81.216 512s160 356.48 356.544 356.48c95.232 0 184.768-37.056 252.224-104.384 15.744-15.872 41.472-15.872 57.344 0s15.808 41.472 0 57.344c-82.624 82.752-192.576 128.256-309.568 128.256C196.352 949.632 0 753.344 0 512s196.352-437.76 437.76-437.76c241.408 0 437.76 196.352 437.76 437.76l0 0.384 79.104-79.168c15.872-15.808 41.472-15.808 57.472 0C1027.968 449.216 1027.968 474.816 1012.096 490.688z" p-id="2383"></path>
                    </svg>
        `,
        event: {
            click () {
                console.log(this.parent);
            }
        }
    },
    progressTime: true,
    progressBar: {
        layout: 'two-line'
    },
    volume: {
        icon: {
            high: './icon/volume-high.svg',
            low: './icon/volume-low.svg',
            mute: './icon/volume-mute.svg'
        }
    },          
    clarity: {
        list: [
            {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
            {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
            {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
            {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
        ]
    },
    screen: {
        icon: {
            small: './icon/screen-small.svg',
            full: './icon/screen-full.svg'
        }
    }
}

点播播放时，在sn里填入视频地址即可。

AI平台

AI应用

视觉分析

视频

物联网

数据上云

IoT设备

账号体系

智慧城市

电商视频解决方案

教育

全屋智能

医疗

智能制造

游戏

SDK管理

WEB播放器介绍

WEB-Player播放器版本迭代

WEB-Player播放器特性

兼容特性

WEB-Player播放器特性

播放器嵌入

电话咨询：

服务咨询

建议反馈

产品与服务

文档与社区

关于我们

关注我们

请您联系我们

小安提醒您

1对1免费 咨询智汇云专属顾问

为您量身定制产品解决方案

1对1免费咨询智汇云专属顾问