Html5 播放器SDK
更新时间：2021-01-27 16:08:57
简介
网宿提供HTML5 播放器SDK，用于嵌入到PC网页、手机H5中 实现不同终端跨平台播放。
SDK下载
请联系网宿技术支持申请。
快速集成
支持格式
- HTML5播放器
| 浏览器 | mp4 | flv | m3u8 | rtmp | mp3 |
|---|---|---|---|---|---|
| IOS Safari | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| Android | 支持 | 不支持 | 4.0+ | 不支持 | 支持 |
| Chrome | 支持 | 34+ | 34+ | 不支持 | 支持 |
| Firefox | 支持 | 49+ | 49+ | 不支持 | 支持 |
| Edge | 支持 | 支持 | 支持 | 不支持 | 支持 |
| Opera | 支持 | 支持 | 支持 | 不支持 | 支持 |
| MAC Safari | 支持 | 8+ | 8+ | 不支持 | 支持 |
- HTML5 播放器在移动端不支持 flv 和 rtmp 的播放
- 播放 flv、m3u8 视频，PC 端支持的浏览器，需要启用允许跨域访问
- PC 端 chrome 浏览器在移动模拟器下，播放 m3u8 需要安装 Native HLS Playback Chrome 插件
适配情况
- 移动端浏览器视频会默认全屏播放
- 移动端浏览器默认是会弹出全屏播放，针对不同的情况需要不同的设置:
- iOS App: App 内实现内联播放需要设置 Aliplayer 提供的 playsinline 属性 为 true，同时 WebView 需要设置 allowsInlineMediaPlayback，这样页 面在 App 里打开时视频就能以非全屏模式(即内联的方式)播放
- Safari: iOS10 以下版本 Safari 是视频自动全屏播放的，属于系统默认行为
- Android: Android 系统会根据生产厂商区别有不同的定制版本，每个版本 对 H5video标签的实现都有差别，所以在 Android 上播放视频所展现的 一致性，相比 iOS 要差很多，也可以通过设置hlsConfig来实现对 HLS 视 频流，只需要终端浏览器支持 MSE 播放，对于 X5 内核浏览器(微信，QQ 浏览器)可以启用同层播放，达到类似目的。
- 设置 autoplay=true 无效，不会自动播放
- 对于移动端，video 自动播放视频只有两个办法，通过设置 autoplay 属性
或者调用 play()方法，但是现实是在移动端中视频自动播放一直是被禁止 的，目前通用的办法是通过用户手动触发播放(例如 监听用户的点击事件 并调用 play() 方法，或者通过静音切换的方式实现，但是不排除一些特殊 浏览器和 WebView 允许自动播放器，特别是在 Android 上。 - 对于PC侧，
- Safari: MacOS High Sierra Safari 11 以上的浏览器限制自动播放
- Chrome: Chrome 55 以上版本也限制自动播放
- 对于移动端，video 自动播放视频只有两个办法，通过设置 autoplay 属性
- 音量调节功能(getVolumn和setVolumn)iOS 和部分 Android 会失效
- 倍速播放功能，大部分移动端浏览器不支持设置倍速，功能失效，比如 Android 微 信
- 微窗预览功能，大部分移动端浏览器不支持微窗触发，功能失效，比如 Android 系 统播放器
- 断网重连功能，大部分移动端浏览器在播放 MP4 和 HLS 格式视频时会劫持播放 器，这之后播放器无法支持重连，可通过设置开启 hlsConfig 支持
文件清单
| 文件名 | 说明 |
|---|---|
| demo/player.html | 相关 demo 展示页面 |
| demo/main.js | 相关引用 js 文件 |
| lang/en.js | 国际化英文界面 |
| lang/Zh-CN.js | 国际化中文界面 |
| wsplayer.min.js | SDK 库文件 |
| wsplayer.min.css | SDK 样式文件 |
| wsplayer-vr.min.js | SDK-VR 库文件 |
| wsplayer-vr.min.css | SDK-VR 样式文件 |
如何嵌入
- 下载播放器 SDK
- HTML5 播放器需要引入
<script src="./wsplayer.min.js"></script>
语言方面通过引入相应文件实现，DEMO 中提供了中英文两种文本
<script src="./lang/zh-CN.js"></script>
- 若需要支持 VR 播放，则应当再引入
<script src="./vr/wsplayer-vr.min.js"></script>
简单使用
<body><!-- id/class 属性必须提供，且 class 值必须为 video-js --><video id="my-player" class="video-js"></video>
<script src="./wsplayer.min.js"></script> <!-- 国际化中文样式，引入相应文件--> <script src="./lang/zh-CN.js"></script> <script>
const player = WSPlayer('my-player', { // 播放配置, 详见参数说明
muted:true,
autoplay:true,
controls:true,
// 若为直播，应设置 isLive:true, sources:[{
src: 'https://xxxxx.mp4',
type: WSPlayer.CODEC.MP4,
label: '480P'
}],
.... }, () => {
console.log('Your player is ready!'); player.on(WSPlayer.WSEvent.PLAY.ENDED, function() {
console.log('video ended.');
});
player.on(WSPlayer.WSEvent.PLAY.ERROR, function(event, error) { console.log('video error: ', error);
}); });
</script></body>
本篇文档内容对您是否有帮助？
有帮助
我要反馈