笨办法用腾讯云视频搭建wordpress低频使用的自适应码流视频播放器

示例：

向安宇个人网站-腾讯云视频点播超级播放器

实现方法：

推荐腾讯云，理由：

使用简单
可以设置自己的品牌元素
如果转码mp4可以直接有".mp4“结尾的链接，方便wordpress自带播放器使用
费用：低频使用，费用忽略

步骤：

1、腾讯云视频点播后台，创建自适应处理的任务流

笨办法用腾讯云视频搭建wordpress低频使用的自适应码流视频播放器-讲故事的手艺人

任务流添加：

添加自适应码流任务，可以设置水印
添加雪碧图（可选，我需要的应用场景用处不大）
添加截取封面图任务，可以设置水印

最好再配置下分发域名，设置好防盗链。

2、上传视频

在腾讯云视频点播后台上传视频，因为使用低频，虽然麻烦一点，但是可以接受。上传的同时选择已配置好的任务流。

3、wordpress文章里添加视频

腾讯云视频点播后台选择管理视频，选择超级播放器预览，选择复制代码。

在wordpress文章里添加html区块，粘贴代码：

<!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.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.12.4.js"></script>
        <!-- 引入播放器 js 文件 -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js"></script>
        <!-- 示例 CSS 样式可自行删除 -->
    </head>
    <body>
        <!-- 设置播放器容器 -->
        <video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
        <!--
        注意事项：
        * 播放器容器必须为 video 标签
        * player-container-id 为播放器容器的ID，可自行设置
        * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
        * playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
        -->
        <script>
            var player = TCPlayer("player-container-id", { /**player-container-id 为播放器容器ID，必须与html中一致*/
                fileID: "52********06", /**请传入需要播放的视频fileID 必须 */
                appID: "1*******3", /**请传入点播账号的appID 必须 */
                /**其他参数请在开发文档中查看 */
                });
        </script>
    </body>
</html>

这时候会发现无法自适应。

添加css如下：

<style>
    html,body{
      margin: 0;
      padding: 0;
    }
    /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
    #player-container-id {
      width: 100%;
      max-width: 100%;
      height: 0;
      padding-top: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25  */
    }
    /* 外部容器也需要是自适应的*/
    #wrap {
      width: 80%;
      margin: 0 auto;
    }
    /* 设置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>

代码变成为：

<!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.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.12.4.js"></script>
        <!-- 引入播放器 js 文件 -->
        <script src="//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.min.js"></script>
        <!-- 自适应 CSS 样式  -->
<style>
    html,body{
      margin: 0;
      padding: 0;
    }
    /* 通过 css 设置播放器尺寸 这时<video>中的宽高属性将被覆盖*/
    #player-container-id {
      width: 100%;
      max-width: 100%;
      height: 0;
      padding-top: 56.25%; /* 计算方式：播放器以16：9的比率显示，这里的值为 9/16 * 100 = 56.25  */
    }
    /* 外部容器也需要是自适应的*/
    #wrap {
      width: 80%;
      margin: 0 auto;
    }
    /* 设置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="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
        <!--
        注意事项：
        * 播放器容器必须为 video 标签
        * player-container-id 为播放器容器的ID，可自行设置
        * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
        * playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
        -->
        <script>
            var player = TCPlayer("player-container-id", { /**player-container-id 为播放器容器ID，必须与html中一致*/
                fileID: "528589*******24506", /**请传入需要播放的视频fileID 必须 */
                appID: "1253223083", /**请传入点播账号的appID 必须 */
                /**其他参数请在开发文档中查看 */
                });
        </script>
    </body>
</html>

我个人用腾讯云视频播放器的时候比较少，所以css样式没必要写进主题，也没必要开发别的简便方法。

平时代码存放到icloud，偶尔用的时候复制粘贴，更改fileID就可以。

之所以用这种方法，主要是为了偶尔有需求给别人看自己的片子，比如客户审片，为了优化体验，放腾讯视频、优酷视频链接，有广告；新片场无法链接出来；B站视频总在升级链接……所以，自己弄吧。

另外，自适应码流已让客户有更流畅的观看体验，也是很好的。况且，还有0.5、1.0、1.25、1.5、2.0倍速可选，真香。

wordpress