开发指南

更新时间: 2022/08/23 11:51:59

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

开通服务

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

页面准备

  1. 在需要播放视频的页面中通过相对路径引入初始化脚本。
<link href="../dist/neplayer.min.css" rel="stylesheet">
<script src="../dist/neplayer.min.js"></script>
  1. 如需使用 H.265 解码,请配置解码库地址,解码库为 SDK 中的 libffmpeg.jslibffmpeg.wasm文件。

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

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

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

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

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

<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代码来手动初始化播放器。

neplayer("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
此文档是否对你有帮助?
有帮助
去反馈
  • 开通服务
  • 页面准备
  • 添加播放器video标签和canvas标签
  • 关于canvas标签的说明
  • 关于video标签class的说明
  • 关于data-setup属性的说明
  • (推荐)后加载播放器