导语
随着4G/5G时代的到来,短视频/直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分。腾讯云对象存储(COS)作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务,早已不是一个简单的对象存储服务,结合数据万象(CI)的数据处理能力,同时具备丰富的音视频能力。
本期 COS 音视频实践,将带您用多种姿势让您存储在 COS 上的视频在 Web 浏览器上“跑”起来,在浏览器下用多款播放器播放您的视频文件。
一. Web 视频播放器介绍
二. COS 视频能力的支持情况对比
三. 以播放器为例,
实现播放 COS 公有读视频文件
<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>
<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>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<div id="dplayer"></div>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
},
});
<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>
var tcplayer = TCPlayer("player-container-id", {})
tcplayer.src('https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4')
<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>
<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;
<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
<div id="griffith-player"></div>
const sources = {
play_url: 'https://video-public-1259789488.cos.ap-guangzhou.myqcloud.com/test.mp4',
}
Griffith.createPlayer(document.getElementById('griffith-player')).render({sources}
<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 音视频实践”系列文章,从具体的音视频能力出发,为您奉上相关的解决方案,敬请期待。
↓↓↓
↓↓↓