WEB视频自适应（下）_xgplayer前贴片

解决了web视频自适应和黑边的问题后，可能还想页面上的视频更加个性化，比如视频封面、视频LOGO、跑马灯、视频广告、弹幕等,网上有很多H5页面视频播放器组件，比如，video.js、ckplayer、酷播云、BAT云厂商的视频播放器Web-SDK等。
一、H5视频播放器
1、video.js
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器，拥有数百个皮肤和插件，自定义扩展很方便。
官方网址：https://videojs.com/
github地址：https://github.com/videojs/video.js
video.js使用方法：
(1)下载解压文件后，直接将css和js文件放置项目相应目录下，或者直接在页面</head>前引入CDN文件，如下：

<link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video-js.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.9.5/video.min.js"></script>
<style>
.video-box {
   width: 100%;
   margin: 0 auto;
}
</style>
1
2
3
4
5
6
7
8

(2)将下面代码放置在DIV容器中：

<div class="video-box">
<video
    id="my-player"
    class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

属性选项设置说明：
id=“my-player”　　//视频播放器ID名
class属性：

video-js　　//默认类名标识符
vjs-default-skin　　//默认皮肤
vjs-big-play-centered　　//播放按钮位置居中
vjs-16-9　　//设置视频比例16:9
vjs-4-3　　//设置视频比例4:3
---------------------------
16:9和4:3选一即可
1
2
3
4
5
6
7

controls 　//视频控制条
preload=“auto” 　//预加载
poster="//vjs.zencdn.net/v/oceans.png" 　//视频封面
data-setup=’{}’ 　//数据设置属性，videojs会根据data-setup中的json参数来初始化视频播放器，如下：

<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
1

默认用video标准标签属性来初始化videojs视频播放器选项：
<video controls autoplay preload=“auto” …>
等同于<video data-setup=’{ “controls”: true, “autoplay”: false, “preload”: “auto” }’…>
当然也可以通过js来控制。

<script>
  var player = videojs('my-player', {
    muted: true,
    controls: true,
    height: 360,
    width: 640,
    loop: true,
    // 更多配置.....
  });
</script>
1
2
3
4
5
6
7
8
9
10

播放按钮样式可调整为圆形或自定义，增加 .video-js .vjs-big-play-button 样式即可。

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

video.js还有更多选项配置和事件方法，感兴趣可以深入研究。

2、ckplayer
ckplayer用于在网页端播放视频，支持mp4,flv,m3u8及rtmp协议的直播，支持移动端，PC端。
官方网址：https://www.ckplayer.com/
gitee地址：https://gitee.com/niandeng/ckplayer
ckplayer的使用方法：
下载文件包解压，将ckplayer文件夹放置在网站目录里，在需要调用播放器的页面使用如下代码即可进行播放：

<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div class="video" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
    //定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
	container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
	variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
	video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
    };
    var player = new ckplayer(videoObject);//初始化播放器
</script>
1
2
3
4
5
6
7
8
9
10
11

ckplayer的特性说明：

支持使用js控制播放器，如：播放，暂停，调节音量，静音，实时限制控制栏
支持使用js监听播放器各种状态，如播放，暂停，音量改变，播放器尺寸改变
支持前贴片广告，中插贴片广告，播放结束贴片广告，暂停广告及其它自定义位置的广告 播放器界面采用json文件进行定义，修改方便

可见ckplayer功能强大，是WEB视频个性化的不二之选。

3、百度云cyberplayer
CyberPlayer 是百度官方推出的用于开发网页播放器的软件开发工具包播放器，播放器SDK 的优势：

内嵌百度自主研发的 T5 播放内核，支持目前所有主流的视频格式 (mp4,flv等) 及流媒体协议
(HLS，RTMP），弥补了原生播放器在媒体支持格式上的不足，并在兼容性、稳定性和响应速度上有了明显的提高。
提供简单、快捷的接口，帮助开发者高效创建媒体播放应用，有效降低了开发多媒体应用的技术门槛。
提供安全易用的轻量级版权保护功能，通过视频转码平台用AES128加密算法对视频文件进行加密，防止非法用户对视频内容进行复制和扩散，为您的音视频版权提供安全保障。

播放器-Web-SDK地址：
https://cloud.baidu.com/doc/MCT/s/zjwvz4w4z
cyberplayer Demo地址：
http://cyberplayer.bcelive.com/demo/new/index.html
使用方法参见官方文档和demo，如下：

<div id="playercontainer"></div>
<script type="text/javascript" src="player/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 960, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 540, // 高度，也可以支持百分比
        title: "基本功能", // 标题
        file: "http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4", // 播放地址
        image: "http://cyberplayer.bcelive.com/thumbnail.jpg", // 预览图
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 100, // 音量
        controls: true, // controlbar是否显示
        starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
        logo: { // logo设置
            linktarget: "_blank",
            margin: 8,
            hide: false,
            position: "top-right", // 位置
            file: "./img/logo.png" // 图片地址
        },
        ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

手机端web播放器的使用注意事项有哪些？

手机由于其自生浏览器的限制，手机浏览器web播放与PC浏览器在表现上存在一些区别如下：

手机浏览器不支持自动播放，controls 必须设置为true。 手机浏览器上不支持加密视频的解密播放。
目前主要支持mp4和m3u8这两种主流视频格式，不支持flv和rtmp格式，且部分android手机不支持m3u8文件的播放。
因为兼容性问题，一些功能比如图片广告、右键、跑马灯、视频打点等均不建议在手机上使用。

如果视频较大，建议开通百度云的音视频智能点播VideoWorks产品。

百度智能云音视频点播平台（VideoWorks）以媒资管理+工作流处理为核心，为您提供了音视频采集上传、安全存储、灵活管理、智能处理、内容审核、极速分发、流畅播放、商业变现、数据统计分析等端到端一站式解决方案。

4、阿里云Web播放器
阿里云Web播放器SDK（Aliplayer SDK）支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、清晰度切换、直播时移等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。
官方地址：https://player.alicdn.com/aliplayer/index.html
在线文档：https://help.aliyun.com/document_detail/125570.html
github地址：https://github.com/aliyunvideo/AliyunPlayer_Web

阿里云也提供了在线配置服务，只需复制视频URL即可在线生成代码：
https://player.alicdn.com/aliplayer/setting/setting.html

5、腾讯云Web播放器
腾讯云针对不同的业务场景和使用场景，提供了不同的 Web 视频播放器，分别为：
(1)点播超级播放器
点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器，采用以 HTML5为主，Flash 为辅的播放方式，在浏览器不支持 HTML5的情况下采用 Flash 播放。

该播放器只适用于使用云点播业务的 Web 点播视频播放场景。
要播放的视频需经过腾讯云转码，原始视频无法保证在浏览器中正常播放。
使用方法详见官方文档：
https://cloud.tencent.com/document/product/266/14424
播放示例，浏览器中右键查看页面源码查看代码实现：
https://imgcache.qq.com/open/qcloud/video/tcplayer/examples/vod/tcplayer-vod-base.html

(2)TCPlayer Lite
独立播放器 TCPlayer Lite 实现了基本的视频播放器功能，采用 HTML5 和 Flash 相结合的播放模式，支持播放 HLS、MP4 格式的点播视频和 RTMP、HTTP-FLV、HLS 协议的直播视频，支持主要的桌面和移动端浏览器。

该播放器仅支持传入地址播放，不关联业务，适用于轻量化 Web 视频播放场景，支持点播和直播，支持通过 CSS 定制化界面。
使用方法详见官方文档：
https://cloud.tencent.com/document/product/881/20207
播放示例，浏览器中右键查看页面源码查看代码实现：
https://web-player-1252463788.file.myqcloud.com/demo/tcplayer.html?_ga=1.199226920.64144216.1579152762

6、酷播云Web播放器
酷播云，为中小型用户提供免费视频云服务，是国内唯一免费SaaS视频云产品，酷播云包含视频上传、转码、分发、播放、互动、数据分析于一体，只需简单代码调用，即可实现跨平台跨终端的视频播放，并且提供完备的API接口和SDK安装包，便于二次开发。
官方网址：http://www.cuplayer.com/
帮助文档：http://www.cuplayer.com/cuplayer/help/
演示范例：https://www.52player.cn/Demos/CuPlayerV4/player/
H5优先：https://www.52player.cn/Demos/CuPlayerV4/player/demoX5.html
示例功能很多，可细细研究，按需使用。

7、chimee-player组件化H5播放器框架
chimee-player组件化H5播放器框架，支持 mp4、m3u8、flv 等多种格式，由360奇舞团视频云前端组研发，它帮我们解决大部分的兼容性问题，能够解决包括全屏、自动播放、内联播放、直播解码等常见视频需求。
官方地址：https://chimee.org/
github地址：https://github.com/Chimeejs/chimee-player

chimee-player可以播放 mp4、m3u8、flv 等多种格式的视频流，它帮我们解决大部分的兼容性问题，能够解决包括全屏、自动播放、内联播放等常见视频需求。

8、西瓜视频播放器（HTML5）
官方地址：https://h5player.bytedance.com/
github地址：https://github.com/bytedance/xgplayer
快速上手
只需三步：安装、DOM占位、实例化即可完成播放器的使用。
(1) 安装
最新稳定版

$ npm install xgplayer
1

对于已有项目也可以通过 CDN 引入，代码如下：

<script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>
1

注意:生产环境使用时请在CDN地址中锁定版本，CDN使用方法参考 jsdelivr。

(2) 使用

1. 在页面提供占位 DOM

<div id="mse"></div>
1

(3) 实例化

let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4'
});
1
2
3
4

就两步完成最简单的视频播放（mp4点播），播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置参考 配置。

如果想完成直播的功能，播放器会自动识别直播或回放，更多内容请参考示例：
https://h5player.bytedance.com/examples/
西瓜视频播放器也提供了在线生成功能：
https://h5player.bytedance.com/generate/

9、其他web视频播放组件
DPlayer：https://dplayer.js.org/
JPlayer：http://www.jplayer.org/
VideoLAN：http://www.videolan.org/
MediaElement.js：http://www.mediaelementjs.com/

---

以上所有播放器及组件都支持H5移动端，功能强大，完美自适应，大家可根据项目需要选用。

---

二、web视频使用注意事项：
视频不论大小，最好是上传至云，使用云端点播服务，CDN加速分发，流畅性好。
免费的推荐：酷播云
收费的推荐：BAT，当然首选阿里云
如果视频多且流量大，又不想为其买单，那就将视频上传至优酷、爱奇艺、腾讯视频等各大平台，通过地址调用。

备注：
(1) MP4 和 HLS（M3U8）是目前在桌面浏览器和手机浏览器上支持程度最广泛的格式。
(2) playsinline 和webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放。
(3) 视频点播（ApsaraVideoVoD，简称VoD）是集视频采集、编辑、上传、媒体资源管理、自动化转码处理（窄带高清™）、视频审核分析、分发加速于一体的一站式音视频点播解决方案。