当前位置: 首页 > 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文件格式。

http://www.lryc.cn/news/257190.html

相关文章:

  • uniapp小程序分享为灰色
  • python:五种算法(OOA、WOA、GWO、PSO、GA)求解23个测试函数(python代码)
  • DIP——添加运动模糊与滤波
  • SQL Server查询计划(Query Plan)——SQL处理过程
  • 【动手学深度学习】(十二)现代卷积神经网络
  • 【小沐学Python】Python实现TTS文本转语音(speech、pyttsx3、百度AI)
  • TCP通信
  • 2023济南大学acm新生赛题解
  • docker-compose安装教程
  • 【rabbitMQ】rabbitMQ用户,虚拟机地址(添加,修改,删除操作)
  • Python高级算法——动态规划
  • MySQL在Centos7环境安装
  • halcon视觉缺陷检测常用的6种方法
  • openGauss学习笔记-151 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_basebackup
  • 报错:Uncaught ReferenceError: Cannot access ‘l‘ before initialization
  • 计算机视觉-机器学习-人工智能顶会 会议地址
  • 784. 字母大小写全排列
  • HarmonyOS鸿蒙应用开发——HTTP网络访问与封装
  • vscode 编写爬虫爬取王者荣耀壁纸
  • spring boot + uniapp 微信公众号 jsapi 支付
  • 【数学建模】《实战数学建模:例题与讲解》第九讲-时间序列分析(含Matlab代码)
  • 大话数据结构-查找-有序表查找
  • Qt实现二维码生成和识别
  • MyBatisX插件
  • 《C++20设计模式》学习笔记---原型模式
  • SpringBootAdmin设置邮件通知
  • 深度解析IP应用场景API:提升风险控制与反欺诈能力
  • Java连接数据库增删改查-MyBatis
  • 在国内,现在月薪1万是什么水平?
  • 【Python网络爬虫入门教程1】成为“Spider Man”的第一课:HTML、Request库、Beautiful Soup库