产品
存储
视频服务
人工智能
物联网
基础PaaS
研发运维
企业应用
专有部署
存储
存储服务
对象存储 OBS
稳定、安全、可靠的云存储服务
视频服务
视频应用
视频直播 LIVE
大规模实时转码、低延时的直播服务
视频点播 VOD
视频流畅播放服务
音视频通话 RTC
便捷的跨平台实时音视频互动直播服务
媒体处理 MPC
简洁的云媒体转码及内容合成处理服务
视频工具
视频工具SDK
视频剪辑SDK | 播放SDK
人工智能
内容审核
内容审核
图片审核|文本审核|音频审核|视频审核
人脸与人体识别
人脸人体识别
人脸识别|人体识别|人脸比对|摔倒检测
OCR识别
OCR识别
卡证识别|通用文本识别|车牌识别
图像技术
图像技术
面向图片场景提供的多种人工智能技术
AI开发平台
零门槛AI开发平台
AI能力定制平台
AI市场
模型市场
图片、音频、视频等多场景的算法模型
物联网
物联网视频
帝视物联网视频 SDK
低延时、海量存储的物联网视频监控服务
物联网平台
企业物联网平台
设备管理|设备接入|规则引擎|应用开发
生活物联网平台
生活物联网平台
针对消费级智能设备的物联网平台
物联网边云融合
智能边缘
边云协同操作系统
基础PaaS
网络与CDN
内容分发网络 CDN
安全、稳定、低延时的分发加速服务
P2P内容分发网络 PCDN
利用闲置资源而构建的低成本高品质CDN
动态加速 DCDN
动态获取内容,提升加载速度的加速服务
主站加速WSA
动静混合站点的加速服务
应用开发
云短信 SMS
融合三网,安全可信的短信服务
360PAY
一站式支付解决方案
消息推送 360PUSH
高效、精确、实时的消息推送
研发运维
研发效能
兼容性测试
提供数百款TOP机型的云测服务
真机租用
远程真机租用,流畅体验如手机在手
ios预审
智能扫描、分析、筛查ios审核的被拒风险点
企业应用
视频应用
幕印企业学堂
企业培训|内容付费|知识营销
视图计算
云边融合 AI赋能的智能视图计算
易讲教室直播
视频技术与传统教室融合
企业工具
亿方云企业网盘
在线编辑、文件管理、知识管理
APIcloud
提供安全可靠的加固防护产品及服务
统一身份认证平台
API文档、调试、MOCK一体化协作平台
电子签章
无纸办公,远程签署各种电子合同
安全应用
SSL证书
一站式的 HTTPS 解决方案
三六零天御加固保
提供安全可靠的加固防护产品及服务
专有部署
云计算
360Stack云计算管理平台
规划、建设、运维一体的云计算解决方案
大数据
奇麟大数据
企业级一站式大数据平台
智能网关
奇盾Api网关
全托管的API网关服务
容器服务
360容器管理平台
可对外私有化的容器云平台
AI开发平台
360AI开发平台
全流程机器学习开发平台
更多产品,敬请期待
解决方案
产品解决方案
行业解决方案
产品解决方案
视频
通用直播解决方案
短视频解决方案
公共语音房聊天室解决方案
物联网
儿童手表音视频通话
云端NVR解决方案
数据上云
通用存储解决方案
IoT设备
AI+IPC解决方案
智能门锁解决方案
安防传感解决方案
智能网关解决方案
个护健康解决方案
账号体系
360用户帐号体系解决方案
行业解决方案
智慧城市
智慧社区解决方案
智慧交通解决方案
电商视频解决方案
电商视频解决方案
电商平台收款解决方案
教育
在线教育解决方案
互动课堂解决方案
全屋智能
智慧公寓解决方案
智慧酒店解决方案
家庭智能解决方案
智慧安防解决方案
医疗
健康看护解决方案
智能制造
工业物联网解决方案
游戏
游戏音视频解决方案
更多解决方案,敬请期待
帮助支持
技术社区
关于我们
控制台
登录
注册
SDK管理
云直播
产品文档
常见问题
API文档
云点播
产品文档
快速入门
API文档
CDN
产品文档
API文档
云存储
产品文档
SDK手册
API文档
互动直播
产品文档
API文档
操作指南
SDK管理
播放SDK
上传SDK
剪辑SDK
媒体处理
产品文档
API文档
帝视
产品文档
API文档
操作指南
支付平台
产品列表
产品文档
渠道接入解析
内容审核
产品文档
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
VCloudPlayer
拍摄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
小安提醒您
试用小安,请确保该账户已通过智汇云实名认证
前往认证中心>>
1对1免费
咨询智汇云专属顾问
为您量身定制产品解决方案
您的姓名 :
手机号 :
公司名称(选填) :
相关产品 :
留言内容 :
需求描述
产品建议
其他
提交
登录后才可以留言哦
立即登录
去注册账号