国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

在vue中使用dplayer播放hls m3u8格式視頻

2年前作者：飛吃魚分類：Toy博客閱讀(21)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了在vue中使用dplayer播放hls m3u8格式視頻。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

Dplayer 官方文檔地址

Dplayer官方地址

雖然在vue中有vue-dplayer但卻沒有對hls進(jìn)行很好的支持所以建議還是使用Dplayer

npm i dplayer
npm i hls.js

在組件中引入

dplayer hls,vue.js,音視頻,前端

播放m3u8格式的視頻需要框選部分 – 建議查看官方文檔MSE支持

切換視頻

切換視頻需要用到switchVideo() api
dplayer hls,vue.js,音視頻,前端文章來源地址http://www.zghlxwxcb.cn/news/detail-644440.html

方便大家復(fù)制部分片段

this.Dp = new Dplayer({
                element:this.$refs.player,
                mutex:false,
                loop:true,
                lang:'zh-cn',
                autoplay:true,
                preload:'none',
                video:{
                    url:'',
                    type: 'customHls',
                    customType: {
                    customHls: function (video, player) {
                        console.log('video',video,player);
                    const hls = new HLS();
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                    },
                },
                }
            })

到了這里，關(guān)于在vue中使用dplayer播放hls m3u8格式視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

【vue】前端頁面點(diǎn)擊按鈕彈窗播放m3u8格式視頻
最終效果： 1.表格操作列 2.initVideo方法 3.彈出層代碼 4.showAll_dialog樣式 5.第2步跳轉(zhuǎn)的video.html頁面代碼，用dplayer播放的，放在項(xiàng)目根目錄的public文件夾即可
2024年02月04日
瀏覽(21)
DPlayer m3u8 視頻禁止下載
正常的 m3u8 格式視頻通過控制臺是無法下載的，但是可以通過插件下載，下面介紹如何規(guī)避這個(gè)問題。思路：后端生成一個(gè)一次性的密鑰，前端放在請求頭中，可以防止大部分插件下載。這里只說前端。集成 DPlayer 播放器這里就不說了，網(wǎng)上一大推。
2024年01月24日
瀏覽(23)
UE5接入在線直播視頻源，如hls(m3u8)格式
通過重編譯VlcMedia插件，以支持在線直播視頻在UE5中的播放，GIF動(dòng)圖如下：本文主要包括插件的重編譯、在線直播視頻的接入，以及材質(zhì)的創(chuàng)建三個(gè)部分。 2.1 VlcMedia插件重編譯 GitHub上有 Ue4VlcMedia 插件，但最新的版本只支持到UE4.19，因此需要重編譯源碼以支持UE5。VlcMedia插件
2024年02月12日
瀏覽(23)
video插件播放m3u8格式視頻(存原生)
這里使用原生的javascript實(shí)現(xiàn)m3u8格式視頻播放。使用了包括video.min.js庫和HLS插件。在上面代碼中，首先引入了video.min.js庫和對應(yīng)的播放器樣式video-js.css，還引入了videojs-contrib-hls.min.js庫(引入順序考慮優(yōu)先放到頁面加載之前)。之后，創(chuàng)建一個(gè)video標(biāo)簽，并指定source的src屬性為
2024年02月13日
瀏覽(27)
Uniapp H5 播放m3u8、flv格式視頻
簡述一下業(yè)務(wù)需求，僅僅是需要在H5頁面播放m3u8格式的視頻，但是Uniapp官方提供的video組件在H5端不支持m3u8格式的視頻播放，所以需要使用第三方庫來播放，這里我使用的是MuiPlayer，但是貌似MuiPlayer的官方文檔沒有過多提及UniApp的用法，由于MuiPlayer默認(rèn)支持mp4格式播放，所以
2024年04月15日
瀏覽(29)
hls.js如何播放m3u8文件（實(shí)例）？
?HLS（HTTP Live Streaming）是一種視頻流傳輸協(xié)議，是蘋果推出的適用于iOS與macOS平臺的流媒體傳輸協(xié)議。它將視頻分割成若干個(gè)小段，每個(gè)小段大小一般為2~10秒不等，并通過HTTP協(xié)議進(jìn)行傳輸。通過在每個(gè)小段之間插入若干秒的間隔，可以提高視頻的傳輸穩(wěn)定性和用戶的觀看體驗(yàn)
2023年04月23日
瀏覽(31)
vue2 使用 vue-video-player 播放m3u8 流地址視頻
安裝插件? ：注意需要引入??videojs-contrib-hls ，否則無法播放hls流文件? main.js 引入代碼內(nèi)引入：注意點(diǎn)：??? 1.type: \\\'application/x-mpegURL\\\' ，否則無法播放流文件? 2.aspectRatio: \\\'16:9\\\',? 寬高比需要進(jìn)行設(shè)置，若沒有進(jìn)行設(shè)置，會(huì)出現(xiàn)黑邊過高或者過寬的問題常用API方法：
2024年02月07日
瀏覽(27)
video.js 播放m3u8、flv、rtmp、RTS格式視頻
?第一種方案（只適用m3u8格式）：屬性說明 ? ?options: { ? ? ? ? ? ? ? ? ? ? autoplay: true, // 設(shè)置自動(dòng)播放 ? ? ? ? ? ? ? ? ? ? muted: true, // 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音（Chrome66及以上版本，禁止音視頻的自動(dòng)播放） ? ? ? ? ? ? ? ? ? ? prelo
2024年02月12日
瀏覽(36)
vue3播放m3u8視頻（videoJS）
需要同時(shí)導(dǎo)入videoJS以及相關(guān)的CSS 以下時(shí)項(xiàng)目使用中自己封裝的組件，用起來也很簡單，需要的可以對照自取 UI框架為 ant-design-vue
2024年02月03日
瀏覽(18)
CRMEB知識付費(fèi)二次開發(fā) 加密阿里云視頻MP4點(diǎn)播鏈接為m3u8格式 hls blob協(xié)議
只有添加分發(fā)加速的域名才能使用HLS加密，同時(shí)也要做HTTPS證書添加，不然也會(huì)報(bào)錯(cuò)。 1、這是電腦端視頻播放頁面效果 2、這個(gè)手機(jī)端H5視頻播放頁面效果 3、在網(wǎng)站后臺上傳你的視頻內(nèi)容 4、上傳完之后可以進(jìn)行預(yù)覽 5、在阿里云控制臺設(shè)置就好自己的轉(zhuǎn)碼模板將不轉(zhuǎn)碼設(shè)為
2024年02月08日
瀏覽(19)