1. 云图网首页
  2. 技术专区
  3. 编程笔记

流媒体服务器（11）—— 云点播播放器方案调研实录

• 编程笔记

​

目录

一、项目背景

二、调研过程

三、决定因素

四、其他建议

1. 文档内容方面

2. 控制台方面

3. 开源代码

4. 超级播放器 Adapter 和 超级播放器对比

一、项目背景

前段时间公司对接了一个智能泊车项目，在这个项目中会产生大量的泊车视频，因为会涉及到用户隐私，需要将这些视频文件安全的上传到云端存储起来，并支持后续的安全播放需求。

二、调研过程

最初确定了三家云厂商，包括阿里云、腾讯云、华为云。接下来，深入对比分析一下三者在这个项目中的优劣。先说安全性，三家的差别不大，无论是存储时还是播放时，都具备一定的安全策略和安全认证。再说云存储功能，三家的差别也不大，无论是存储能力还是 SDK 对接集成的易用性方面也差不多。

三、决定因素

最后，就看谁更符合这个项目了。先说华为云，它是首先被pass的，因为该项目的后台管理服务是基于 B/S 模式的，而华为云视频点播服务目前仅提供安卓、iOS 版本的播放器，没有对应 Web 的 H5 版本的播放器。下图是华为云关于安卓和 iOS 播放器 SDK 的介绍文档。

再说阿里云，阿里云在播放器终端的支持方面是最丰富的，包括了安卓、iOS、Web、Windows、Flutter版本的播放器 SDK，支持视频的加密播放、安全下载、清晰度切换、短视频等能力，提供了简单、快速、安全、稳定的视频播放服务。

最后说腾讯云，腾讯云的播放器 Player 支持 Web 端、iOS 端、Android 端、Flutter 端四大终端，还提供了超级播放器和超级播放器 Adapter 两种类型的播放器，这也是我们选择腾讯云最重要的原因之一。因为用户的技术人员对比播放器集成基本上没有任何概念，它们希望开箱即用，而腾讯云的超级播放器就非常适合。但是，如果细心的话你就会发现腾讯云在播放器的适配终端方面，在目前来看，确实比华为云要丰富，但是比阿里云的话，缺少一个 Windows 终端。希望腾讯云产品同学加加油，赶紧补齐哟！

以上是关于产品功能方面的介绍，结合阿里云和华为云对比分析了腾讯云的云点播产品的优劣。下面说一说其他方面的内容。

四、其他建议

1. 文档内容方面

文档是我比较想吐槽一下的，其实也不是什么大问题，但是，感觉腾讯云作为一个这么大的云平台，还是应该更加严谨一些，一些排版问题和错别字还应该极力避免的。比如下图，我已经搞不懂这句话想说什么了。

2. 控制台方面

腾讯云云点播在控制台方面还是非常给力的，缺点目前就发现一个，就是视频文件列表的封图。如果可能话，非常建议上传时默认生成视频文件的缩略图，目前视频文件上传到云点播存储大致有两种途径，一种是本地上传，通过拖拽、工具、命令行、代码等都是可以实现；另一种是通过URL的形式进行视频拉取导入。如果不明确指定不生成封面，就都默认使用封面进行视频预览。现在的情况，非常影响用户体验，给用户一种错觉，好像视频封面没有加载出来。如果替换新的默认封面也可以的，但是建议别像现在的样子。

3. 开源代码

接下来，主要针对云点播的 Web H5 超级播放器进行介绍，播放器 demo 截图如下：

打开“开发者模式”，我们可以看到对应的网络请求，视频文件的播放地址是两层 m3u8 嵌套方式，第一层 m3u8 文件包含的是不同分辨率的 m3u8 文件，比如下图中的 adp.10.m3u8 文件：

​最终播放的是第四档的 m3u8 文件，即 video_10_3.m3u8。该文件的内容如下：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:11
#EXTINF:10.417,
10_3_0.ts
#EXTINF:10.417,
10_3_1.ts
#EXTINF:10.417,
10_3_2.ts
#EXTINF:10.417,
10_3_3.ts
#EXTINF:10.417,
10_3_4.ts
#EXTINF:9.667,
10_3_5.ts
#EXT-X-ENDLIST

这就是我们平常遇到的 m3u8 文件的形式，其中包含了6个 ts 分片。同时结合 1583590918.vtt 字幕文件，完成最终的播放任务。

同样，在“开发者模式”下，我们也可以拿到这个播放器 demo 的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
  <title>腾讯云视频点播示例</title>
  <!-- 引入播放器 css 文件 -->
  <link href="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
  <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
  <!--[if lt IE 9]>
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
  <![endif]-->
  <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
  <!-- 引入播放器 js 文件 -->
  <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
  <!-- 示例 CSS 样式可自行删除 -->
  <style>
    html,body{
      margin: 0;
      padding: 0;
    }
    .tcplayer {
      margin: 0 auto;
    }
    @media screen and (max-width: 640px) {
      #player-container-id {
        width: 100%;
        height: 270px;
      }
    }
    /* 设置logo在高分屏的显示样式 */
    @media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) {
      .tcp-logo-img {
        width: 50%;
      }
    }
  </style>
</head>
<body>
<!-- 设置播放器容器 -->
<video id="player-container-id" preload="auto" width="640" height="360" playsinline webkit-playsinline>
</video>
<!--
注意事项：
* 播放器容器必须为 video 标签
* player-container-id 为播放器容器的ID，可自行设置
* 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
* playsinline webkit-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
* 设置 x5-playsinline 属性会使用 X5 UI 的播放器
-->
<script>
  var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
    fileID: '5285890799710670616', // 请传入需要播放的视频filID 必须
    appID: '1400329073', // 请传入点播账号的appID 必须
    //其他参数请在开发文档中查看
    plugins: {
      ContinuePlay: {
        // auto: true // 是否在播放时自动续播
      },
      ProgressMarker: true,
      ContextMenu: {
        statistic: true,
        levelSwitch: {
          open: true, // 打开切换提示
          // switchingText: '开始', // 开始切换时文案
          // switchedText: '成功', // 切换成功时文案
          // switchErrorText: '失败', // 切换失败时文案
        }
      }
    }
  });
</script>
</body>
</html>

通过上述代码，我们可以看出，集成腾讯云的超级播放器还是非常简单的，想要播放哪个视频传入对应的 fileID 就行了。

4. 超级播放器 Adapter 和 超级播放器对比

下面说一说云点播的 H5 超级播放器 Adapter，它比 H5 超级播放器具备更加灵活的 API 接口，下面是二者的对比表格：

播放器类别

功能

特点

自定义程度

超级播放器

支持播放 URL

支持播放点播 URL 和第三方来源的 URL

低

支持播放点播 FileID

提供点播一体化数据上报、质量监控服务

低

超级播放器 Adapter

仅支持播放点播 FileID

支持用户使用第三方或者自研播放器集成

高

我们可以看到官方的文档，在 Web 端的超级播放器 Adapter 的 Demo 展示区域是空白的，可能是产品同学正在规划，也可能是正在开发过程中，或者就没有打算开放出来。不管怎么说，我先讲一下我关于这个 Demo 展示的设想。

我们知道超级播放器的 Demo 页面展示非常空旷，那么超级播放器 Adapter 应该尽量避免，比如参考 hls.js 的 Demo 页面，把提供的能力都以控件的形式展示出来，具体效果如下图所示：

​

​

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/212459.html

赞 (0)
0
上一篇 2021年12月16日
下一篇 2021年12月16日

相关推荐

发表回复

登录后才能评论