当前位置: 首页 > news >正文

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

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

预览地址
m3u8player.org

源码地址
https://github.com/geeeeeeeek/m3u8player

开发步骤

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

 <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 以及宽高都可以自定义)。

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

第三步:初始化并播放

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文件格式。

相关文章:

  • 合并区间 Merge intervals
  • Docker部署开源分布式任务调度平台DolphinScheduler并实现远程访问办公
  • 036.Python面向对象_self_cls_super
  • ffmpeg常用命令
  • 倪海厦:教你正确煮中药,发挥最大药效
  • 别再写满屏的 try catch 了,教你如何统一处理异常!
  • uniapp 数组添加不重复元素
  • 【PHP】php发送邮箱验证码格式美化,样式美化
  • Shopify 开源 WebAssembly 工具链 Ruvy
  • MongoDB的条件操作符
  • mysql5.7安装详细教程
  • 【目标检测从零开始】torch实现yolov3数据加载
  • Tomcat管理功能使用
  • [Geek Challenge 2023] web题解
  • 德国进口高速主轴电机在机器人上的应用及选型方案
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 【个人向】《HTTP图解》阅后小结
  • Android框架之Volley
  • GitUp, 你不可错过的秀外慧中的git工具
  • Intervention/image 图片处理扩展包的安装和使用
  • Just for fun——迅速写完快速排序
  • Koa2 之文件上传下载
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • REST架构的思考
  • 创建一种深思熟虑的文化
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 聊聊redis的数据结构的应用
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 携程小程序初体验
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • ionic异常记录
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • ​secrets --- 生成管理密码的安全随机数​
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ######## golang各章节终篇索引 ########
  • ( 10 )MySQL中的外键
  • (2)MFC+openGL单文档框架glFrame
  • (C++)栈的链式存储结构(出栈、入栈、判空、遍历、销毁)(数据结构与算法)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第1节 (全局数据、栈和堆)
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (实测可用)(3)Git的使用——RT Thread Stdio添加的软件包,github与gitee冲突造成无法上传文件到gitee
  • (五)Python 垃圾回收机制
  • (杂交版)植物大战僵尸
  • (转) Face-Resources
  • (转)C#调用WebService 基础
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .net的socket示例
  • .NET简谈设计模式之(单件模式)
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth
  • .net流程开发平台的一些难点(1)
  • @vueup/vue-quill使用quill-better-table报moduleClass is not a constructor