easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解
更新時(shí)間：2023年09月22日 09:04:05 作者：huaweichenai
這篇文章主要為大家介紹了easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
一：介紹
easywasmplayer文檔地址：https://www.npmjs.com/package/easywasmplayer
EasyPlayer.js H5播放器，是一款能夠同時(shí)支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）視頻直播與視頻點(diǎn)播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺(tái)終端的H5播放器。
二：html+js實(shí)現(xiàn)視頻流播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
<style>
.box {
width:600px;
height:400px;
}
</style>
</head>
<body>
<div class="box">
<div id="Player"></div>
</div>
<script>
// 實(shí)例化播放器
var Player = new WasmPlayer(null,'Player',callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
// 調(diào)用播放
Player.play('視頻流地址', 1);
//播放事件回調(diào)
function callbackFun(e) {
console.log(e)
}
</script>
</body>
</html>三：vue實(shí)現(xiàn)視頻流播放
1：安裝easywasmplayer
npm install @easydarwin/easywasmplayer --save
2：拷貝
將@easydarwin/easywasmplayer/EasyWasmPlayer.js和@easydarwin/easywasmplayer/libDecoder.wasm拷貝到項(xiàng)目public目錄下
3：在public目錄下的index.html引入easywasmplayer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" />
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>4：使用easywasmplayer實(shí)現(xiàn)視頻流播放
<template>
<div class="box">
<div id="Player"></div>
</div>
</template>
<script>
export default {
data() {
return {
player: '',
url: '視頻流地址'
}
},
mounted() {
// 實(shí)例化播放器
this.player = new WasmPlayer(null, 'Player', this.callbackfun)
// 調(diào)用播放
this.player.play(this.url, 1)
},
methods: {
//播放事件回調(diào)
callbackfun(e) {
console.log('callbackfun', e);
}
}以上就是easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解的詳細(xì)內(nèi)容，更多關(guān)于easywasmplayer視頻流播放的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家匯總了Bootstrap table分頁的典型問題，以及對(duì)應(yīng)每個(gè)bootstrap table分頁問題的解決方法，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern)實(shí)例詳解
這篇文章主要介紹了JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern),簡(jiǎn)單說明了觀察者模式的概念、原理并結(jié)合實(shí)例形式詳細(xì)給出了觀察者模式的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-10-10
實(shí)例詳解BootStrap的動(dòng)態(tài)模態(tài)框及靜態(tài)模態(tài)框
要用bootStrap這個(gè)框架就必須要重載它的class類,也就是說class要一樣。接下來通過實(shí)例代碼給大家介紹BootStrap的動(dòng)態(tài)模態(tài)框及靜態(tài)模態(tài)框,需要的朋友可以參考下2018-08-08
JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開效果實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開效果,結(jié)合具體實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)頁面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
JS異常處理的作用是幫助開發(fā)者識(shí)別和處理運(yùn)行時(shí)的錯(cuò)誤和異常情況,確保程序在出現(xiàn)問題時(shí)能夠優(yōu)雅地降級(jí)或恢復(fù),而不是導(dǎo)致整個(gè)應(yīng)用崩潰或產(chǎn)生不可預(yù)測(cè)的行為,這篇文章主要介紹了JS?try?catch基本用法以及常見的異常處理,需要的朋友可以參考下2025-04-04
Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對(duì)象操作示例
這篇文章主要介紹了Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對(duì)象操作,結(jié)合實(shí)例形式分析了JavaScript類型顯示轉(zhuǎn)換、隱式轉(zhuǎn)換、變量作用域、封閉函數(shù)及常用內(nèi)置對(duì)象相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)
本文主要介紹了js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了VCalendar的安裝和使用方法,包括如何通過官網(wǎng)地址引入API,并在項(xiàng)目中全局引入main.js文件,使用VCalendar可以實(shí)現(xiàn)日歷功能,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細(xì)介紹了js自定義彈框插件的簡(jiǎn)單封裝，自己封裝一個(gè)彈框插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
javascript的offset、client、scroll使用方法詳解
javascript的offset、client、scroll在使用過程中非常頻繁，接下來將對(duì)此進(jìn)行一一介紹，需要了解的朋友可以詳細(xì)參考下2012-12-12