产品
基础服务
视频云
人工智能
物联网
区块链
第三方服务
存储服务
云存储
网络加速
CDN
PCDN
动态加速(DCDN)
全站加速(WSA)
奇盾
企业应用
云短信
SSL证书
电子签章
支付系统
帐号服务平台
视频应用
云直播
云点播
音视频通信RTC
媒体处理
视频工具
剪辑SDK
播放SDK
云剪辑
推流SDK
内容安全
图片审核
视频审核
文本审核
音频审核
OCR识别
卡证识别
通用文本识别
车牌识别
人脸与人体识别
人脸实名认证
人脸识别
人体识别
图像技术
以图定位
AI开发平台
机器学习平台 Prophet Pro
AI能力定制平台 Prophet Lite
物联网视频
帝视
物联网平台
设备接入
设备管理
规则引擎
应用开发
边缘计算
区块链通用服务
QBaaS
开测平台
兼容性测试
真机租用
运营
消息推送
企业应用
企业直播-小虎盟
企业培训/在线教育/知识付费
教学直播-易讲
视频技术与传统教室融合
智能监控-小安
云边融合, AI使能的智能视频监控
解决方案
通用解决方案
行业解决方案
视频
通用直播解决方案
短视频解决方案
公共语音房聊天室解决方案
物联网
儿童手表音视频通话
云端NVR解决方案
数据上云
通用存储解决方案
IoT设备
摄像机
门锁
安防传感
网关
个护健康
账号体系
360用户帐号体系解决方案
智慧城市
智慧社区
智慧交通
电商
电商视频解决方案
电商平台收款解决方案
教育
在线教育解决方案
互动课堂解决方案
全屋智能
智慧公寓
智慧酒店
家庭智能
智慧安防
医疗
健康看护
智能制造
工业物联网
游戏
游戏音视频解决方案
帮助支持
关于我们
技术社区
控制台
登录
注册
SDK管理
云直播
产品文档
常见问题
API文档
云点播
产品文档
快速入门
API文档
CDN
产品文档
API文档
云存储
产品文档
SDK手册
API文档
互动直播
产品文档
API文档
操作指南
SDK管理
播放SDK
上传SDK
剪辑SDK
媒体处理
产品文档
API文档
帝视
产品文档
API文档
操作指南
帐号服务平台
整体介绍
SDK文档
支付平台
产品列表
产品文档
渠道接入解析
内容审核
产品文档
API文档
OCR识别
产品文档
API文档
人脸与人体识别
产品文档
API文档
SSL证书
产品说明
购买指南
电子签章
产品介绍
接入流程
云短信
接口文档
物联网平台
产品简介
快速入门
小虎盟
产品介绍
OBS使用教程
Android互动直播
开发文档
版本说明
Windows互动直播
开发文档
版本说明
iOS互动直播
Android推流
开发文档
版本说明
iOS推流
iOS推流SDK开发文档
Android上传SDK
Android上传SDK接入文档
Android上传SDK版本说明
IOS上传SDK
iOS上传sdk开发文档
IOS上传SDK版本说明
Net SDK
iOS
开发文档
版本说明
Android
开发文档
版本说明
IoT SDK
iOS
开发文档
版本说明
Android
开发文档
版本说明
Web
开发文档
版本说明
固件端
开发文档
WEB播放SDK
WEB播放器介绍
跨域请求媒体源失败
QHWW-Player
拍摄SDK
iOS
开发文档
版本说明
Android
开发文档
版本说明
剪辑SDK
iOS
版本说明
开发文档
Android
开发文档
版本说明
投屏SDK
iOS
开发文档
Android
开发文档
播放SDK
iOS
开发文档
版本说明
Android
开发文档
版本说明
Web 上传SDK
首页
>
开发者中心
>
SDK管理
>
WEB播放SDK
>
WEB播放器介绍
### 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](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](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 & 自定义组件 ```js 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里填入视频地址即可。
即刻开始使用
只需完成注册与实名认证,即可体验我们的贴心服务
立即注册
请您联系我们
邮箱
g-zyun@360.cn
电话
010-56821952
给我们留言
您的姓名
手机号
公司名称(选填)
相关产品
留言内容
需求描述
产品建议
其他
提交
登录后才可以留言哦
立即登录
去注册账号