基于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播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。 预览地址 m3u8player.org 源码…...
uniapp小程序分享为灰色
引用:https://www.cnblogs.com/panwudi/p/17074172.html uniapp开发的微信小程序,没有转发,分享: 创建一个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个函数 (1)23个函数简介 参考文献: [1] Yao X, Liu Y, Lin G M. Evolutionary programming made…...
DIP——添加运动模糊与滤波
1.运动模糊 为了模拟图像退化的过程,在这里创建了一个用于模拟运动模糊的点扩散函数,具体模糊的方向取决于输入的motion_angle。如果运动方向接近水平,则模糊效果近似水平,如果运动方向接近垂直,则模糊效果近似垂直。具…...
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主要改进ÿ…...
【小沐学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) 译为从文本到语音,TTS是人工智能AI的一个模组…...
TCP通信
第二十一章 网络通信 本章节主要讲解的是TCP和UDP两种通信方式它们都有着自己的优点和缺点 这两种通讯方式不通的地方就是TCP是一对一通信 UDP是一对多的通信方式 接下来会一一讲解 TCP通信 TCP通信方式呢 主要的通讯方式是一对一的通讯方式,也有着优点和缺点…...
2023济南大学acm新生赛题解
通过答题情况的难度系数: 签到:ACI 铜牌题:BG 银牌题:EF 金牌题:DHJKO 赛中暂未有人通过:LMNP A - AB Problem 直接根据公式计算就行。 #include<stdio.h> int main(){int a,b;scanf("%…...
docker-compose安装教程
1.确认docker-compose是否安装 docker-compose -v如上图所示表示未安装,需要安装。 如上图所示表示已经安装,不需要再安装,如果觉得版本低想升级,也可以继续安装。 2.离线安装 下载docker-compose安装包,上传到服务…...
【rabbitMQ】rabbitMQ用户,虚拟机地址(添加,修改,删除操作)
rabbitMQ的下载,安装和配置 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中的动态规划:高级算法解析 动态规划是一种解决多阶段决策问题的数学方法,常用于优化问题。它通过将问题分解为子问题,并在解决这些子问题的基础上构建全局最优解。在本文中,我们将深入讲解Python中的动态规划,…...
MySQL在Centos7环境安装
说明: • 安装与卸载中,⽤⼾全部切换成为root,⼀旦 安装,普通⽤⼾能使⽤的 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 ,webpack.config.js 下配置 .babel 或 babel.config.js "plugins": ["babel/plugin-transform-runtime" ] webpack.config.js,详见 Webpack target module.exports {target: [web, es5], }...
计算机视觉-机器学习-人工智能顶会 会议地址
计算机视觉-机器学习-人工智能顶会 会议地址 最近应该要整理中文资料的参考文献,很多会议文献都需要补全会议地点(新国标要求)。四处百度感觉也挺麻烦的,而且没有比较齐全的网站可以搜索。因此自己整理了一下计算机视觉-机器学习…...
784. 字母大小写全排列
字母大小写全排列 描述 : 给定一个字符串 s ,通过将字符串 s 中的每个字母转变大小写,我们可以获得一个新的字符串。 返回 所有可能得到的字符串集合 。以 任意顺序 返回输出。 题目 : LeetCode 784.字母大小写全排列 : 784. 字母大小写全排列 分析…...
HarmonyOS鸿蒙应用开发——HTTP网络访问与封装
文章目录 基本使用封装参考 基本使用 鸿蒙应用发起HTTP请求的基本使用,如下: 导入http模块创建httpRequest对象发起http请求,并处理响应结果 第一、导入http模块: import http from ohos.net.http第二、创建httpRequest对象&a…...
vscode 编写爬虫爬取王者荣耀壁纸
网上关于爬虫大部分教程和编辑器用的都不是vscode ,此教程用到了vscode、Python、bs4、requests。 vscode配置Python安装环境可以看看这个大佬的教程 03-vscode安装和配置_哔哩哔哩_bilibili vscode配置爬虫环境可以参考这个大佬的教程【用Vscode实现简单的python…...
3分钟上手PCL2-CE:打造专属Minecraft启动环境的完整指南
3分钟上手PCL2-CE:打造专属Minecraft启动环境的完整指南 PCL2-CE社区版是一款开源游戏配置工具,致力于为Minecraft玩家提供高效、灵活的游戏环境管理方案。通过智能化配置和模块化设计,让玩家告别繁琐设置,轻松掌控游戏入口&…...
4大核心革新:PCL-CE打造高效Minecraft启动体验
4大核心革新:PCL-CE打造高效Minecraft启动体验 PCL-CE作为社区驱动的Minecraft启动器增强版,整合了多维度管理功能,为玩家提供从环境配置到性能优化的全流程解决方案。本文将通过"问题-方案-验证"框架,带您探索如何利用…...
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 由俄罗斯开发者打造,具有超高稳定性(资源占用极低…...
重生之我用 AI 复活了我的同事
阅读本文大概需要 2.8 分钟。在写这篇文章之前先解答上篇文章评论区反映的两个问题:第一个问题,有人读完文章说,张哥,那以后是用 AI 还是不用呢?当然要用了,而且是鼓励大家全面使用。我文章本意是 AI 发展之…...
智慧树网课助手:智能化学习效率提升解决方案
智慧树网课助手:智能化学习效率提升解决方案 【免费下载链接】zhihuishu 智慧树刷课插件,自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 一、问题诊断:在线学习的效率困境与技术破局 1.1 …...
芯片研发为什么总是延期?问题不在技术,在管理没闭环
一个芯片项目失败,事后复盘,技术问题往往只占一小部分。更多的时候,是计划没做好,执行过程没人盯,出了问题没人协调,最后交付的时候才发现跑偏了很久。这是行业里非常普遍的现象。法约尔在一百年前提出管理…...
GG3M 项目独家原创理论:元模型的形式化结构
GG3M 项目独家原创理论:元模型的形式化结构本元模型是GG3M 贾子公理体系的形式化数学内核,是对全尺度复杂系统(个人认知、企业经营、城市治理、国家战略、文明演化)底层规律的顶层抽象,是 GG3M 所有子模型、应用场景、…...
Ubuntu系统中Miniconda的安装与配置指南
1. 为什么选择Miniconda? 在开始之前,我们先聊聊为什么要在Ubuntu上安装Miniconda。作为一个长期使用Python进行数据分析和机器学习开发的工程师,我尝试过各种Python环境管理工具,最终发现Miniconda是最适合个人开发者的选择。它比…...
从零到一:手把手教你用CANoe和Python脚本实现UDS诊断自动化测试(附完整代码)
从零到一:手把手教你用CANoe和Python脚本实现UDS诊断自动化测试(附完整代码) 在汽车电子测试领域,UDS(Unified Diagnostic Services)诊断协议的自动化测试已经成为提升开发效率的关键环节。传统的手动测试方…...
从零到一:阿里云天池街景符号识别Baseline实战指南
从零到一:阿里云天池街景符号识别Baseline实战指南 街景符号识别是计算机视觉领域一项极具挑战性的任务,它要求模型能够准确识别并理解街道场景中的各类符号信息。对于刚接触深度学习实战的开发者来说,如何从零开始构建一个完整的识别系统往往…...
