开发指南

1 SDK 概述

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

2 开发准备

2.1 开通服务

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

2.2 页面准备

在需要播放视频的页面中引入初始化脚本

<link href="//nos.netease.com/vod163/nep.min.css" rel="stylesheet">
<script src="//nos.netease.com/vod163/nep.min.js"></script>

2.3 添加播放器video标签

使用网易云视频eb sdk你只需使用HTML5的video标签即可在页面中嵌入视频,neplayer会在页面载入时读取页面中的video标签,并初始化播放器。播放器的id属性必须存在且必须是该页面上唯一的,不然无法正常初始化播放器;data-setup属性用于配置初始化的播放器,详情见API开发文档;除此之外的属性,设置,source标签和tracks都和HTML5原生video标签相同。更多关于HTML5 video 标签的说明详见MDN

<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="{}">
    <source src="MY_VIDEO.mp4" type="video/mp4">
</video>

关于video标签class的说明

关于data-setup属性的说明

2.4 (推荐)后加载播放器

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

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

第一个参数"example_video_1"是你要加载的video标签的id属性 第二个参数是播放器的配置选项,配置详情见API开发文档 注意:对于播放器已经初始化过的情况,这个选项将不起作用。例如页面的video标签有data-setup的情况下,播放器已经自动初始化过。 第三个参数是播放器初始化完成时的回调函数

3 注意

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

4 开发示例Demo

开发示例Demo 更多播放器方法详见Web 播放器 SDK API 文档