网易云信视频播放器 Web SDK 是网易官方推出的用于开发网页播放器的软件开发工具包。 提供 HTML5 和 Flash 两种播放模式，并可以根据浏览器环境和视频数据源自动切换播放模式。 支持Flv、MP4、RTMP、HLS等主流视频格式和协议，支持在微信等移动端中使用。

开通服务

注册网易云信视频并获取播放地址。

页面准备

1. 在需要播放视频的页面中通过相对路径引入初始化脚本。

html<link href="../dist/neplayer.min.css" rel="stylesheet">
<script src="../dist/neplayer.min.js"></script>

2. 如需使用 H.265 解码，请配置解码库地址，解码库为 SDK 中的 libffmpeg.js 和libffmpeg.wasm文件。

添加播放器video标签和canvas标签

使用网易云信视频 Web SDK， 您只需使用 HTML5 的 video 标签即可在页面中嵌入视频，neplayer 会在页面载入时读取页面中的 video 标签，并初始化播放器。

播放器的id属性必须存在且必须是该页面上唯一的，不然无法正常初始化播放器。

data-setup 属性用于配置初始化的播放器，详情请参见API参考。

除此之外的属性、设置、tracks 都和 HTML5 原生 video 标签相同。更多关于HTML5 video 标签的说明详见MDN。

html<canvas id="canvas" style="width: 640px; height: 360px;display: none;">
<video id="my-video" class="video-js" x-webkit-airplay="allow" webkit-playsinline controls poster="poster.png" preload="auto" width="640" height="360" data-setup="{}">
</video>

关于canvas标签的说明

• H.265 视频采用 canvas 作为播放器。
• 为了和 video 保持一样的布局以及不影响 H.264 视频的播放，需设置 canvas 宽高和 video 一致，浮于 video 上方，且默认隐藏。

关于video标签class的说明

• 为了播放器样式能正常加载，class中必须有"video-js"类。
• 如果要使播放器的播放按钮位于播放器正中间而不是左上角，需要在class中增加"vjs-big-play-centered"类。
• 如果要使播放器自适应填满父元素，需要在class中增加"vjs-fluid"类。

关于data-setup属性的说明

• data-setup属性值是一个JSON字符串，代表播放器的配置选项，与 API 中的配置选项作用相同，用来配置播放器的加载。

• video标签的原生属性（controls、 poster、 preload、 width、 height等）都可以直接放到配置选项中，例如： data-setup='{"preload":"auto","controls":true}'。

  • 不建议使用data-setup属性来配置播放器初始化选项，多数情况下，您应该用neplayer初始化接口的第二个参数。
  • 当video标签中无data-setup属性时，sdk将不会自动加载播放器。您需要使用下面介绍的api来手动加载播放器。

（推荐）后加载播放器

如果你的video标签是后加载的（例如innerHTML或者appendChild），即播放器不在页面最初始的html中，或者你的video标签中无data-setup属性，您需要使用如下js代码来手动初始化播放器。

javascriptneplayer("example_video_1", {}, function(){
  // 当播放器初始化完成时运行的回调函数
});

• 第一个参数"example_video_1"是你要加载的video标签的id属性。

• 第二个参数是播放器的配置选项，配置详情请参见API参考。

  对于播放器已经初始化过的情况，这个选项将不起作用。例如页面的video标签有data-setup的情况下，播放器已经自动初始化过。

• 第三个参数是播放器初始化完成时的回调函数。

• 播放页面需要挂 IP 或域名访问，如若直接打开本地静态页面将无法播放。
• 请使用 setDataSource 接口修改播放地址。
• 播放器实例的所有方法都应该在播放器初始化完成后才调用，否则可能导致报错。
• H.265播放必须在第二个参数中传入canvasId属性，值为canvas标签的 ID。

视频格式	type
HTTP-MP4	video/mp4
HTTP-FLV	video/x-flv
RTMP-FLV	rtmp/flv
HTTP-HLS	application/x-mpegURL

示例代码

const options = {
  controls: false,
  autoplay: true,
  errMsg7: '拉流超时 | 直播已结束', //CND拉流超时场景下：播放器拉流超时是的UI报错内容
  streamTimeoutTime: 30, //设置拉流超时时间，缺省30s
  techOrder: ['html5','flvjs'],
  decoderPath: '' //CDN拉流场景下，H265解码库的url
};

//创建播放器实例
const videoDomID = 'my-video' //页面上video标签的id，要求页面唯一
const myPlayer = neplayer(videoDomID, options, function () {
  console.log('播放器初始化完成: ', myPlayer)
})

//事件监听

//监听低延迟直播事件
myPlayer.onNertcEvent((data) => {
  console.log('收到低延迟通知事件: ', data)
  if (data.eventType === 'liveStreamEnd') {
    console.log(`检测到主播停止推流`)
  } else if(data.eventType === 'liveStreamReady'){
    //麻烦使用者记录这个uid和cid，出现问题反馈给我们，可以大大提高排查的速度和精准度
    console.log(`拉流成功: uid: ${data.uid}, cid: ${data.cid}`)
  } else if(data.eventType === 'atuoPlayNotAllowed'){
    console.log(`检测媒体播放失败: `, data.mediaType)
 
    /*
    可以页面弹筐加一个按钮
    执行: 
    myPlayer.resumeLiveStream()
    或者执行:
    myPlayer.setDataSource(data)
    */

    /* 示例代码，供参考
    const userGestureUI = document.createElement("div")
    userGestureUI.style.fontSize = "20px";
    userGestureUI.style.position = "fixed";
    userGestureUI.style.background = "yellow";
    userGestureUI.style.margin = "auto";
    userGestureUI.style.width = "100%";
    userGestureUI.style.zIndex = "9999";
    userGestureUI.style.top = "0";
    userGestureUI.onclick = ()=>{
      if (userGestureUI){
        userGestureUI.parentNode?.removeChild(userGestureUI)
      }
      //执行该方法重新播放，解决浏览器的自动播放限制
      myPlayer.resumeLiveStream()
    }
    
    userGestureUI.style.display = "block";
    userGestureUI.innerHTML = `${data.mediaType}自动播放受到浏览器限制，需手势触发。<br/>点击此处手动播放`
    document.body.appendChild(userGestureUI)
    */

  } else if (data.eventType === 'reconnectioning') {
    console.log(`拉流网络异常，正在重连`)
  } else if (data.eventType === 'reconnected') {
    console.log(`拉流网络异常，自动重连成功`)
  } else if (data.eventType === 'streamTimeout') {
    console.log(`拉流超时了，已经停止拉流`)
  } else if (data.eventType === 'error') {
    console.log(`拉流异常，错误信息: ${data.errorEvent.message}`)
  }  
})

//设置拉流地址
const data = {
  type: 'nertc', //拉流协议为HTTP-FLV，改值为: 'video/x-flv'；拉流协议为HTTP-HLS，改值为: 'application/x-mpegURL'；拉流协议为NERTC低延迟直播，改值为: 'nertc'
  src: 'nertc://xxxxxx.live.126.net/live/627d576c92124c7aa8767ea9e29a7c16',
  streamTimeoutTime: 20，//仅NERTC低延迟直播场景下，允许动态设置拉流的超时时间
  isLive: true
}
//该接口会执行拉流，并且渲染播放
myPlayer.setDataSource(data)

//CDN拉流不支持自动播放
//受浏览器自动播放策略限制，需要手动触发
document.getElementById('play').onclick = function() {
    myPlayer.setDataSource(data)
}