vue中添加音頻和視頻的示例詳解
視頻播放功能
1. 安裝vue-video-player
npm install vue-video-player --save
或
yarn add vue-video-player --save
2. 在main.js中全局引用
import VueVideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' Vue.use(VueVideoPlayer)
或以局部方式按需引入
import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css'
注：在此處可能會出現(xiàn)引用不上的錯誤，npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-video-player - Not found
這個報錯是因為察覺到組件引用不了，所以再次安裝vue-video-player，解決方法就是在根目錄手動創(chuàng)建聲明文件，手動創(chuàng)建一個 TypeScript 聲明文件（.d.ts 文件），來為 vue-video-player 添加類型聲明。在項目的根目錄中創(chuàng)建一個新文件，命名為 vue-video-player.d.ts，然后添加以下內容：
declare module 'vue-video-player';
這將告訴 TypeScript vue-video-player 模塊的類型信息，盡管這些信息可能不是很準確。還有一個解決方案就是你可以在 TypeScript 配置中關閉嚴格模式，這樣 TypeScript 將不會強制執(zhí)行類型檢查。在 tsconfig.json 文件中將 "strict": true 更改為 "strict": false。
3. 視頻播放器
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
@play="handlePlay"
@pause="handlePause"
:options="playerOptions">
</video-player>配置參數(shù)
import { ref } from 'vue';
export default {
setup() {
const videoPlayer = ref(null);
const audioSource = ref('./assets/music.mp3');
const playerOptions = {
height: 400,
// playbackRates: [0.7, 1.0, 1.5, 2.0], //視頻加速
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
fluid: true,
sources: [
{
type: 'video/mp4',
src: require('./assets/video.mp4')
}
],
poster: require('./assets/04.jpg'), // 封面地址
notSupportedMessage: '此視頻暫無法播放，請稍后再試',
controlBar: {
timeDivider: true, //當前時間和持續(xù)時間的分隔符
durationDisplay: true, //顯示持續(xù)時間
remainingTimeDisplay: false, //是否顯示剩余時間功能
fullscreenToggle: true, //全屏按鈕
showPlayButton: true,
}
};
const showPlayButton = ref(true);
const handlePlay = () => {
showPlayButton.value = false;
};
const handlePause = () => {
showPlayButton.value = true;
};
return {
videoPlayer,
playerOptions,
showPlayButton,
handlePlay,
handlePause,
audioSource,
};
},
};注：此參數(shù)中包含以下音頻播放器的參數(shù)
音頻播放功能
<audio ref="audioPlayer" controls>
<source :src="audioSource" type="audio/mpeg">
您的瀏覽器不支持
</audio>到此這篇關于vue中添加音頻和視頻的示例詳解的文章就介紹到這了,更多相關vue音頻視頻內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-element-admin登錄攔截設置白名單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結合實例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
Vue3?Radio單選切換展示不同內容實現(xiàn)代碼
這篇文章主要介紹了Vue3?Radio單選切換展示不同內容,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)
這次做項目的時候遇到需要切換預覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關于使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文主要介紹了vue獲取el-form的整體驗證狀態(tài)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點選驗證碼為例,不需要鍵盤手動輸入,極大優(yōu)化了傳統(tǒng)驗證碼用戶體驗不佳的問題,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細介紹了vue.js源代碼core scedule.js的學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vite使用unplugin-auto-import實現(xiàn)vue3中的自動導入
本文主要介紹了Vite使用unplugin-auto-import實現(xiàn)vue3中的自動導入,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
當vue使用庫中的getvalue方法時，需要調用相關方法，通過定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對vue使用引用庫中的方法，感興趣的朋友一起看看吧2021-07-07
vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)
今天小編就為大家分享一篇vue實現(xiàn)將數(shù)據(jù)存入vuex中以及從vuex中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11