基于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.mzph.cn/news/212737.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM进程缓存

引言 缓存在日常开发中启动至关重要的作用&#xff0c;由于是存储在内存中&#xff0c;数据的读取速度是非常快的&#xff0c;能大量减少对数据库的访问&#xff0c;减少数据库的压力。我们把缓存分为两类&#xff1a; 分布式缓存&#xff0c;例如Redis&#xff1a; 优点&…

Mybatis之简介、使用操作(安装、XML、SqlSession、映射的SQL语句、命名空间、作用域和生命周期)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

Java项目-瑞吉外卖Day4

实现文件的上传下载&#xff1a; 前端代码&#xff1a; 对文件的操作就是对流的操作。 上传文件的后端代码&#xff0c;需要注意MultipartFile的名字必须与前端相对&#xff1a; 为文件存储位置进行动态设置&#xff0c;配置application.xml 在CommonController中设置属性读…

Nodejs后端+express框架

前言 基于vue3Node后台管理项目&#xff0c;补充nodejs和express相关知识。 文章目录 一&#xff0c;express 1.官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 2.安装 npm install express --save 二、MongoDB 特点 非关…

uniapp 蓝牙小程序

在 uni-app 中开发蓝牙相关的小程序涉及到使用 uni-app 提供的蓝牙 API。uni-app 为多端开发提供了统一的 API&#xff0c;这意味着你编写的代码可以在不同的平台上运行&#xff0c;包括微信小程序。 以下是实现蓝牙功能的基本步骤和代码示例&#xff1a; 1. 开启蓝牙适配器 …

java之SpringBoot开发实用篇

MENU SpringBoot开发实用篇KF-1.热部署KF-1-1.手动启动热部署KF-1-2.自动启动热部署KF-1-3.参与热部署监控的文件范围配置KF-1-4.关闭热部署 KF-2.配置高级KF-2-1.ConfigurationPropertiesKF-2-2.宽松绑定/松散绑定KF-2-3.常用计量单位绑定KF-2-4.校验KF-2-5.数据类型转换 KF-3…

【头歌系统数据库实验】实验8 SQL的复杂多表查询-2

目录 第1关&#xff1a;基于派生表查询每个队员解答中超过他平均memory的user_id及题目编号problem_id 第2关&#xff1a;用ANY/ALL实现查询2019级选手&#xff08;user_id前4位为2019&#xff09;满足比2020级其中一个选手注册时间早即可的选手 第3关&#xff1a;用聚集查询…

python zblog API实现类似XMLRPC/发布文章

我发现python对Zblog的XML发布并不友好&#xff0c;虽然也有对应的模块&#xff0c;但是远远没有XPCRPC更直接方便&#xff0c;但是使用xmlRpc是直接给发布文章带来了不小的便利&#xff0c;但是对系统也并不友好&#xff0c;但是zblog也开放了Api&#xff0c;但是干部子弟不乐…

UE小:物品拼装功能

蓝图B1的实现步骤&#xff1a; 获取玩家控制器和视角&#xff1a;首先获取玩家控制器&#xff0c;然后使用Deproject Screen to World节点将屏幕上的鼠标位置转换为世界空间中的一条射线。 射线检测&#xff1a;使用Line Trace by Channel或Line Trace for Objects节点发射射线…

深度学习测试流程

深度学习模型测试的功能旨在验证模型在各种情况下的性能和鲁棒性。以下是深度学习模型测试的主要功能&#xff1a; 性能评估&#xff1a; 测试模型在任务目标上的整体性能&#xff0c;例如分类准确性、回归误差等。评估指标的选择取决于具体的任务类型。 泛化能力&#xff1a;…

《信息技术时代》期刊杂志论文发表投稿

《信息技术时代》期刊收稿方向&#xff1a;通信工程、大数据、计算机、办公自动化、信息或计算机教育、电子技术、系统设计、移动信息、图情信息研究、人工智能、智能技术、信息技术与网络安全等。 刊名&#xff1a;信息技术时代 主管主办单位&#xff1a;深圳湾科技发展有限…

C++笔记之int、size_t、uint8_t、unsigned char*区别

C笔记之int、size_t、uint8_t、unsigned char*区别 code review! 文章目录 C笔记之int、size_t、uint8_t、unsigned char*区别1.ChatGPT第一次查询解释2.ChatGPT第二次查询解释3.分别的使用示例 1.ChatGPT第一次查询解释 size_t、uint8_t 和 int 是编程中使用的不同类型&…

《微信小程序开发从入门到实战》学习四十七

4.4 云函数 4.4.5 云函数的定时触发 如果云函数需要定时执行&#xff0c;可以使用云函数定时触发器。配置了定时触发器&#xff0c;云函数会在相应时间点被自动触发。函数返回结果不会返回调用方 在需要添加触发器的云函数下新建文件config.json。格式如下&#xff1a; &quo…

05-详解调用服务时负载均衡的配置及其原理

负载均衡 负载均衡的原理(通用) LoadBalanced注解用来拦截它所标记的RestTemplate发起的http请求, 底层是利用了一个名为Ribbon的组件来实现负载均衡功能(Cloud高版本已经弃用) LoadBalancerInterceptor的intercept方法会对RestTemplate的请求进行拦截 public class LoadBal…

【Linux】使用Bash和GNU Parallel并行解压缩文件

介绍 在本教程中&#xff0c;我们将学习如何使用Bash脚本和GNU Parallel实现高效并行解压缩多个文件。这种方法在处理大量文件时可以显著加快提取过程。 先决条件 确保系统上已安装以下内容&#xff1a; BashGNU Parallel 你可以使用以下命令在不同Linux系统上安装它们&am…

【数据库】分支与循环函数存储过程

目录 函数 【1】 【2】 【3】❗ 【4】 存储过程 思考&分析 函数 【1】 --&#xff08;1&#xff09;定义一个根据学生姓名查询该生学习课程的函数stu_count。 --create function stu_count(sname char(8))--学生姓名 --returns char(12)--学习课程 --begin --…

layui分页laypage结合Flask+Jinja2实现流程

Layui2.0普通用法<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 …

uniapp iOS离线打包——运行项目到模拟器报错?

运行项目、打包时报错问题 记录个人在开发过程中遇到的相关问题&#xff0c;后续有时间会不定时更新 文章目录 运行项目、打包时报错问题运行到模拟器报错解决方案 打包报错解决方案 运行到模拟器报错 解决方案 选中项目工程 —> Build Settings 滑动底部 —> User-Defi…

Java基础课的中下基础课04

目录 二十三、集合相关 23.1 集合 &#xff08;1&#xff09;集合的分支 23.2 List有序可重复集合 &#xff08;1&#xff09;ArrayList类 &#xff08;2&#xff09;泛型 &#xff08;3&#xff09;ArrayList常用方法 &#xff08;4&#xff09;Vector类 &#xff08;…

gin博客项目开发日志1

gin项目博客系统伪第一代 项目概述 1.1 目标 实现一个功能完整、易用的博客系统&#xff0c;允许用户发布、编辑和管理博客文章。 1.2 背景 看到网上有很多语言写的博客系统&#xff0c;但go的却很少&#xff0c;正好&#xff0c;现在我在学go&#xff0c;可以拿博客来练练…