前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于Html+腾讯云播SDK开发的m3u8播放器

基于Html+腾讯云播SDK开发的m3u8播放器

原创
作者头像
西门吹雪1997
发布2023-12-10 21:07:46
3380
发布2023-12-10 21:07:46
举报
文章被收录于专栏:系统设计与开发

周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。

预览地址

m3u8player.org

源码地址

https://github.com/geeeeeeeek/m3u8player

开发步骤

第一步:集成播放器SDK

播放器 SDK 支持 cdn 集成方式:

代码语言:html
复制
 <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/>
 <!--播放器脚本文件-->
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>

第二步:设置容器

然后,设置播放器容器,在需要展示播放器的页面位置加入播放器容器。可以在 index.html 中加入如下代码(容器 ID 以及宽高都可以自定义)。

代码语言:javascript
复制
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

第三步:初始化并播放

代码语言:javascript
复制
var player = TCPlayer('player-container-id', {
    sources: [{
      src: 'path/to/video',
    }],
    licenseUrl: 'https://license-url',
});  

// player.src(url); // url 播放地址

最终集成后的代码可以参考:

https://github.com/geeeeeeeek/m3u8player

附:m3u8知识

M3U8是一种播放多媒体列表的文件格式,它的设计初衷是为了播放音频文件,比如MP3,但是越来越多的软件现在用来播放视频文件列表,M3U8也可以指定在线流媒体音频源。很多播放器和软件都支持M3U8文件格式。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开发步骤
  • 附:m3u8知识
相关产品与服务
播放器 SDK
播放器 SDK 是音视频终端 SDK(腾讯云视立方)的子产品之一,提供直播、点播场景的视频播放能力,支持Web/H5、iOS、Android、Flutter平台。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档