V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
CloudStorage
V2EX  ›  推广

COS 音视频实践 | 多种姿势让你的视频“跑”起来

  •  
  •   CloudStorage · 2021-11-25 10:12:11 +08:00 · 701 次点击
    这是一个创建于 854 天前的主题,其中的信息可能已经有所发展或是发生改变。

    导语

    随着 4G/5G 时代的到来,短视频 /直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储( COS )作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务,早已不是一个简单的对象存储服务,结合数据万象( CI )的数据处理能力,同时具备丰富的音视频能力。

    本期 COS 音视频实践,将带您用多种姿势让您存储在 COS 上的视频在 Web 浏览器上“跑”起来,在浏览器下用多款播放器播放您的视频文件。

    一.主流的 Web 视频播放器介绍

    1.Html<video>:<video> 标签是一个原生的 HTML 节点元素,用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频播放。

    2.Videojs:Videojs 是专为 HTML5 世界构建的网络视频播放器,支持 HTML5 视频和现代流媒体格式,是一款功能强大、高可定制的播放器。

    3.DPlayer:DPlayer 是一款可爱的 HTML5 弹幕视频播放器,可帮助人们轻松构建视频和弹幕,是一款功能丰富、开箱即用的播放器。

    4.TCPlayer:腾讯云点播超级播放器基于 HTML 的 <video> 标签,使用多种播放策略来实现视频播放以及多平台播放效果的统一。

    5.Plyr:Plyr 是一款简单、轻量级、可访问和可定制的 HTML5 媒体播放器,支持现代浏览器。

    6.griffith:griffith 是一款基于 React 的 Web 视频播放器,支持 React 、原生 JavaScript 方式,使用简单,开箱即用。

    二. COS 视频能力的支持情况对比

    三. 以播放器为例,实现播放 COS 公有读视频文件

    3.1. Videojs

    引入对应的视频文件和样式文件;

    <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
    

    初始化播放器,并设置 COS 视频文件对象地址;

    <video    id="my-video"    class="video-js"    controls    preload="auto"    width="640"    height="264"  >    <source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4" type="video/mp4" />  </video>
    

    3.2. DPlayer

    引入对应的视频文件;

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
    

    设置播放器节点;

    <div id="dplayer"></div>
    

    初始化播放器,并设置 COS 视频文件对象地址;

    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
            url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
        },
    });
    

    3.3. TCPlayer

    引入对应的视频文件和样式文件;

    <link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
    <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
    

    设置播放器节点;

    <video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
    

    初始化播放器,并设置 COS 视频文件对象地址;

    var tcplayer = TCPlayer("player-container-id", {})
    tcplayer.src('https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4')
    

    3.4. Plyr

    引入对应的视频文件和样式文件;

    <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
    

    设置播放器节点,并设置 COS 视频文件对象地址;

    <div class="container">
      <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
      <source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4" type="video/mp4" size="576">
    </div>
    

    初始化播放器;

    const player = new Plyr('video', {captions: {active: true}});
    window.player = player;
    

    3.5. griffith

    引入对应的视频文件;

    <script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
    

    设置播放器节点;

    <div id="griffith-player"></div>
    

    初始化播放器,并设置 COS 视频文件对象地址;

    const sources = {
        play_url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
    }
    ​
    Griffith.createPlayer(document.getElementById('griffith-player')).render({sources}
    

    3.6. HTML <video> 标签

    初始化 video 标签,并设置 COS 视频文件对象地址;

    <video controls width="250">
        <source src="https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4"
                type="video/mp4">
    </video>
    

    四. COS 控制台视频预览功能

    此外,COS 控制台还集成了视频的预览功能,您可以在 COS 控制台方便地预览您的视频文件。登陆腾讯云 COS 控制台,选择存储桶进入文件列表页,点击操作栏的预览按钮,即可进入预览模式。

    五. 总结

    在这个开源播放器横行的时代,各类播放器功能五花八门,选择越多的同时,往往会令人眼花缭乱。但具体该使用哪款播放器将取决于业务需求,根据实际场景,选择最合适您的播放方式。

    例如,您需要对存储在 COS 上的视频进行方便预览观看,那么 COS 控制台上的视频预览功能可能适合您。

    又例如,您需要一款开箱即用、功能丰富的播放器,那么 DPlayer 或 griffith 可能适合您。

    双例如,您需要一款高可定制、功能完备的播放器,那么 Videojs 或 Plyr 可能适合您。

    叒例如,您需要一款支持多平台播放效果统一的播放器,那么 TCPlayer 可能适合您。

    叕例如,您想要基于原生的 HTML 能力,自由地定制一款属于您自己的播放器,那么 HTML <video> 标签可能适合您。

    展望

    我们计划开设“COS 音视频实践”系列文章,从具体的音视频能力出发,为您奉上相关的解决方案,敬请期待。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5475 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 09:07 · PVG 17:07 · LAX 02:07 · JFK 05:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.