CDN加速

html5播放器SDK

更新时间:2020-12-14 17:06:47

简介

网宿提供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 以上版本也限制自动播放
  • 音量调节功能(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 样式文件

如何嵌入

  1. 下载播放器 SDK
  2. HTML5 播放器需要引入
<script src="./wsplayer.min.js"></script>

语言方面通过引入相应文件实现,DEMO 中提供了中英文两种文本

<script src="./lang/zh-CN.js"></script>
  1. 若需要支持 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>