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

相关文章:

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

周末业余时间在家无事&#xff0c;学习了一下腾讯的云播放sdk&#xff0c;并制作了一个小demo&#xff08;m3u8播放器&#xff09;&#xff0c;该在线工具是基于腾讯的云播sdk开发的&#xff0c;云播sdk非常牛&#xff0c;可以支持多种播放格式。 预览地址 m3u8player.org 源码…...

uniapp小程序分享为灰色

引用&#xff1a;https://www.cnblogs.com/panwudi/p/17074172.html uniapp开发的微信小程序&#xff0c;没有转发&#xff0c;分享&#xff1a; 创建一个mixin:common/share.js export default {onShareAppMessage(res) { //发送给朋友return {}},onShareTimeline(res) {//…...

python:五种算法(OOA、WOA、GWO、PSO、GA)求解23个测试函数(python代码)

一、五种算法简介 1、鱼鹰优化算法OOA 2、鲸鱼优化算法WOA 3、灰狼优化算法GWO 4、粒子群优化算法PSO 5、遗传算法GA 二、5种算法求解23个函数 &#xff08;1&#xff09;23个函数简介 参考文献&#xff1a; [1] Yao X, Liu Y, Lin G M. Evolutionary programming made…...

DIP——添加运动模糊与滤波

1.运动模糊 为了模拟图像退化的过程&#xff0c;在这里创建了一个用于模拟运动模糊的点扩散函数&#xff0c;具体模糊的方向取决于输入的motion_angle。如果运动方向接近水平&#xff0c;则模糊效果近似水平&#xff0c;如果运动方向接近垂直&#xff0c;则模糊效果近似垂直。具…...

SQL Server查询计划(Query Plan)——SQL处理过程

6. 查询计划(Query Plan) 6.1. SQL处理过程 就SQL语句的处理过程而言,各关系库间大同小异,尤其是商业库之间实现机制和细节差别更小些,其功能及性能支持方面也更加强大和完善。SQL Server作为商业库中的后起之秀,作为SQL语句处理过程的主要支撑和保障,其优化器及相关机…...

【动手学深度学习】(十二)现代卷积神经网络

文章目录 一、深度卷积神经网络AlexNet1.理论知识 一、深度卷积神经网络AlexNet 1.理论知识 ImageNet(2010) 图片自然物体的彩色图片手写数字的黑色图片大小468 * 38728*28样本数1.2M60K类数100010 AlexNet AlexNet赢了2012ImageNet竞赛更深更大的LeNet主要改进&#xff…...

【小沐学Python】Python实现TTS文本转语音(speech、pyttsx3、百度AI)

文章目录 1、简介2、Windows语音2.1 简介2.2 安装2.3 代码 3、pyttsx33.1 简介3.2 安装3.3 代码 4、ggts4.1 简介4.2 安装4.3 代码 5、SAPI6、SpeechLib7、百度AI8、百度飞桨结语 1、简介 TTS(Text To Speech) 译为从文本到语音&#xff0c;TTS是人工智能AI的一个模组&#xf…...

TCP通信

第二十一章 网络通信 本章节主要讲解的是TCP和UDP两种通信方式它们都有着自己的优点和缺点 这两种通讯方式不通的地方就是TCP是一对一通信 UDP是一对多的通信方式 接下来会一一讲解 TCP通信 TCP通信方式呢 主要的通讯方式是一对一的通讯方式&#xff0c;也有着优点和缺点…...

2023济南大学acm新生赛题解

通过答题情况的难度系数&#xff1a; 签到&#xff1a;ACI 铜牌题&#xff1a;BG 银牌题&#xff1a;EF 金牌题&#xff1a;DHJKO 赛中暂未有人通过&#xff1a;LMNP A - AB Problem 直接根据公式计算就行。 #include<stdio.h> int main(){int a,b;scanf("%…...

docker-compose安装教程

1.确认docker-compose是否安装 docker-compose -v如上图所示表示未安装&#xff0c;需要安装。 如上图所示表示已经安装&#xff0c;不需要再安装&#xff0c;如果觉得版本低想升级&#xff0c;也可以继续安装。 2.离线安装 下载docker-compose安装包&#xff0c;上传到服务…...

【rabbitMQ】rabbitMQ用户,虚拟机地址(添加,修改,删除操作)

rabbitMQ的下载&#xff0c;安装和配置 https://blog.csdn.net/m0_67930426/article/details/134892759?spm1001.2014.3001.5502 rabbitMQ控制台模拟收发消息 https://blog.csdn.net/m0_67930426/article/details/134904365?spm1001.2014.3001.5502 目录 用户 添加用户…...

Python高级算法——动态规划

Python中的动态规划&#xff1a;高级算法解析 动态规划是一种解决多阶段决策问题的数学方法&#xff0c;常用于优化问题。它通过将问题分解为子问题&#xff0c;并在解决这些子问题的基础上构建全局最优解。在本文中&#xff0c;我们将深入讲解Python中的动态规划&#xff0c;…...

MySQL在Centos7环境安装

说明&#xff1a; • 安装与卸载中&#xff0c;⽤⼾全部切换成为root&#xff0c;⼀旦 安装&#xff0c;普通⽤⼾能使⽤的 1. 卸载不要的环境 [roothcss-ecs-1036 ~]# ps ajx |grep mariadb # 先检查是否有mariadb存在 13134 14844 14843 13134 pts/0 14843 S 1005 0:00 gr…...

halcon视觉缺陷检测常用的6种方法

一、缺陷检测综述 缺陷检测是视觉需求中难度最大一类需求,主要是其稳定性和精度的保证。首先常见缺陷:凹凸、污点瑕疵、划痕、裂缝、探伤等。常用的手法有六大金刚(在halcon中的ocv和印刷检测是针对印刷行业的检测,有对应算子封装): 1.blob+特征 2.blob+差分+特征 3.光度…...

openGauss学习笔记-151 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_basebackup

文章目录 openGauss学习笔记-151 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_basebackup151.1 背景信息151.2 前提条件151.3 语法151.4 示例151.5 从备份文件恢复数据 openGauss学习笔记-151 openGauss 数据库运维-备份与恢复-物理备份与恢复之gs_basebackup 151.1 …...

报错:Uncaught ReferenceError: Cannot access ‘l‘ before initialization

在文件 .babelrc 或 babel.config.js &#xff0c;webpack.config.js 下配置 .babel 或 babel.config.js "plugins": ["babel/plugin-transform-runtime" ] webpack.config.js&#xff0c;详见 Webpack target module.exports {target: [web, es5], }...

计算机视觉-机器学习-人工智能顶会 会议地址

计算机视觉-机器学习-人工智能顶会 会议地址 最近应该要整理中文资料的参考文献&#xff0c;很多会议文献都需要补全会议地点&#xff08;新国标要求&#xff09;。四处百度感觉也挺麻烦的&#xff0c;而且没有比较齐全的网站可以搜索。因此自己整理了一下计算机视觉-机器学习…...

784. 字母大小写全排列

字母大小写全排列 描述 : 给定一个字符串 s &#xff0c;通过将字符串 s 中的每个字母转变大小写&#xff0c;我们可以获得一个新的字符串。 返回 所有可能得到的字符串集合 。以 任意顺序 返回输出。 题目 : LeetCode 784.字母大小写全排列 : 784. 字母大小写全排列 分析…...

HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

文章目录 基本使用封装参考 基本使用 鸿蒙应用发起HTTP请求的基本使用&#xff0c;如下&#xff1a; 导入http模块创建httpRequest对象发起http请求&#xff0c;并处理响应结果 第一、导入http模块&#xff1a; import http from ohos.net.http第二、创建httpRequest对象&a…...

vscode 编写爬虫爬取王者荣耀壁纸

网上关于爬虫大部分教程和编辑器用的都不是vscode &#xff0c;此教程用到了vscode、Python、bs4、requests。 vscode配置Python安装环境可以看看这个大佬的教程 03-vscode安装和配置_哔哩哔哩_bilibili vscode配置爬虫环境可以参考这个大佬的教程【用Vscode实现简单的python…...

3分钟上手PCL2-CE:打造专属Minecraft启动环境的完整指南

3分钟上手PCL2-CE&#xff1a;打造专属Minecraft启动环境的完整指南 PCL2-CE社区版是一款开源游戏配置工具&#xff0c;致力于为Minecraft玩家提供高效、灵活的游戏环境管理方案。通过智能化配置和模块化设计&#xff0c;让玩家告别繁琐设置&#xff0c;轻松掌控游戏入口&…...

4大核心革新:PCL-CE打造高效Minecraft启动体验

4大核心革新&#xff1a;PCL-CE打造高效Minecraft启动体验 PCL-CE作为社区驱动的Minecraft启动器增强版&#xff0c;整合了多维度管理功能&#xff0c;为玩家提供从环境配置到性能优化的全流程解决方案。本文将通过"问题-方案-验证"框架&#xff0c;带您探索如何利用…...

nginx——方向代理和负载均衡

目录 1.1 Nginx概述 1.1.1 企业青睐 Nginx 的核心原因 1.1.2 Nginx的作用 1.3 反向代理和负载均衡 1.4 注 1.4.1 代理百度并使用 18090 端口 1.1 Nginx概述 1.1.1 企业青睐 Nginx 的核心原因 Nginx 由俄罗斯开发者打造&#xff0c;具有超高稳定性&#xff08;资源占用极低…...

重生之我用 AI 复活了我的同事

阅读本文大概需要 2.8 分钟。在写这篇文章之前先解答上篇文章评论区反映的两个问题&#xff1a;第一个问题&#xff0c;有人读完文章说&#xff0c;张哥&#xff0c;那以后是用 AI 还是不用呢&#xff1f;当然要用了&#xff0c;而且是鼓励大家全面使用。我文章本意是 AI 发展之…...

智慧树网课助手:智能化学习效率提升解决方案

智慧树网课助手&#xff1a;智能化学习效率提升解决方案 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 一、问题诊断&#xff1a;在线学习的效率困境与技术破局 1.1 …...

芯片研发为什么总是延期?问题不在技术,在管理没闭环

一个芯片项目失败&#xff0c;事后复盘&#xff0c;技术问题往往只占一小部分。更多的时候&#xff0c;是计划没做好&#xff0c;执行过程没人盯&#xff0c;出了问题没人协调&#xff0c;最后交付的时候才发现跑偏了很久。这是行业里非常普遍的现象。法约尔在一百年前提出管理…...

GG3M 项目独家原创理论:元模型的形式化结构

GG3M 项目独家原创理论&#xff1a;元模型的形式化结构本元模型是GG3M 贾子公理体系的形式化数学内核&#xff0c;是对全尺度复杂系统&#xff08;个人认知、企业经营、城市治理、国家战略、文明演化&#xff09;底层规律的顶层抽象&#xff0c;是 GG3M 所有子模型、应用场景、…...

Ubuntu系统中Miniconda的安装与配置指南

1. 为什么选择Miniconda&#xff1f; 在开始之前&#xff0c;我们先聊聊为什么要在Ubuntu上安装Miniconda。作为一个长期使用Python进行数据分析和机器学习开发的工程师&#xff0c;我尝试过各种Python环境管理工具&#xff0c;最终发现Miniconda是最适合个人开发者的选择。它比…...

从零到一:手把手教你用CANoe和Python脚本实现UDS诊断自动化测试(附完整代码)

从零到一&#xff1a;手把手教你用CANoe和Python脚本实现UDS诊断自动化测试&#xff08;附完整代码&#xff09; 在汽车电子测试领域&#xff0c;UDS&#xff08;Unified Diagnostic Services&#xff09;诊断协议的自动化测试已经成为提升开发效率的关键环节。传统的手动测试方…...

从零到一:阿里云天池街景符号识别Baseline实战指南

从零到一&#xff1a;阿里云天池街景符号识别Baseline实战指南 街景符号识别是计算机视觉领域一项极具挑战性的任务&#xff0c;它要求模型能够准确识别并理解街道场景中的各类符号信息。对于刚接触深度学习实战的开发者来说&#xff0c;如何从零开始构建一个完整的识别系统往往…...