基于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.pswp.cn/news/212737.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/212737.shtml
英文地址,請注明出處:http://en.pswp.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;可以拿博客來練練…