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，然后添加以下內(nèi)容：
declare module 'vue-video-player';
這將告訴 TypeScript vue-video-player 模塊的類型信息，盡管這些信息可能不是很準確。還有一個解決方案就是你可以在 TypeScript 配置中關(guān)閉嚴格模式，這樣 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, //當(dāng)前時間和持續(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>到此這篇關(guān)于vue中添加音頻和視頻的示例詳解的文章就介紹到這了,更多相關(guān)vue音頻視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex是專門為Vuejs應(yīng)用程序設(shè)計的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機快速了解與實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue3 中的數(shù)據(jù)偵測的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文詳細探討了Vue.js中未控制的事件冒泡問題,包括常見的原因和解決方法,如使用.stop修飾符、調(diào)用event.stopPropagation()、使用.self修飾符以及合理設(shè)計組件結(jié)構(gòu),通過這些方法,可以有效解決事件冒泡導(dǎo)致的問題,提升應(yīng)用的性能和用戶體驗2025-11-11
這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue自定義指令獲取不到參數(shù)的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue+Echarts報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了Vue+Echarts報錯Cannot?set?properties?of?undefined?(setting?‘plate‘)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08