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'注：在此处可能会出现引用不上的错误，npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-video-player - Not found
这个报错是因为察觉到组件引用不了，所以再次安装vue-video-player，解决方法就是在根目录手动创建声明文件，手动创建一个 TypeScript 声明文件（.d.ts 文件），来为 vue-video-player 添加类型声明。在项目的根目录中创建一个新文件，命名为 vue-video-player.d.ts，然后添加以下内容：
declare module 'vue-video-player';这将告诉 TypeScript vue-video-player 模块的类型信息，尽管这些信息可能不是很准确。还有一个解决方案就是你可以在 TypeScript 配置中关闭严格模式，这样 TypeScript 将不会强制执行类型检查。在 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>配置参数
<script>
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, //当前时间和持续时间的分隔符
durationDisplay: true, //显示持续时间
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,
};
},
};
</script>注：此参数中包含以下音频播放器的参数
音频播放功能
组件封装
<div class='daudio'>
<audio ref="audio" @timeupdate="updateProgress" @ended="end" @loadedmetadata="loadedmetadata" controls
style="display: none" src="../assets/music.mp3" preload="metadata">
您的浏览器不支持音频播放
</audio>
<div class="audioBox">
<div class="audioInfo">
<p class="title">潘瑞吉的诗 <span style="color: #999999; font-size: 16px;">云梦</span></p>
<p class="time">{{ current }}/{{ duration }}</p>
</div>
<img ref="control" v-if="!isPlay" src="../assets/play.png" alt="" @click="audioPlay(true)"
class="audioControls" />
<img ref="control" v-else src="../assets/stop.png" alt="" @click="audioPlay(false)"
class="audioControls" />
</div>
</div>配置参数
<script>
export default {
name: "AudioPlayer",
data() {
return {
audio: null,
contorl: null,
contorlDot: null,
contorlProgress: null,
contorlProgressBox: null,
current: "00:00",
duration: "00:00",
isPlay: false
};
},
props: {
},
created() {},
mounted() {
this.init()
},
methods: {
init() {
this.audio = this.$refs.audio;
this.contorl = this.$refs.contorl;
},
// 时分秒转换
transTime(value) {
let that = this;
var time = "";
var h = parseInt(`${value / 3600}`);
value %= 3600;
var m = parseInt(`${value / 60}`);
var s = parseInt(`${value % 60}`);
if (h > 0) {
time = that.formatTime(h + ":" + m + ":" + s);
} else {
time = that.formatTime(m + ":" + s);
}
return time;
},
// 补零
formatTime(value) {
var time = "";
var s = value.split(":");
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length === 1 ? "0" + s[i] : s[i];
time += ":";
}
time += s[i].length === 1 ? "0" + s[i] : s[i];
return time;
},
// 音频播放暂停
audioPlay(status) {
if (status) {
this.audio.play();
} else {
this.audio.pause();
}
this.isPlay = status
},
// 更新进度条与当前播放时间
updateProgress(e) {
this.current = this.transTime(e.target.currentTime);
// let value = e.target.currentTime / Audio.duration;
// current.innerText = transTime(e.target.currentTime);
// contorlProgress.style.width = `${value * 100}%`;
// contorlDot.style.left = `${value * 100}%`;
},
// 音频结束
end(e) {
// contorlProgress.style.width = "0%";
// contorlDot.style.left = "0%";
// contorl.innerText = "播放";
this.isPlay = false
},
loadedmetadata(e) {
this.duration = this.transTime(e.target.duration);
}
},
//如果页面有keep-alive缓存功能，这个函数会触发
activated() { },
};
</script>样式
<style>
.audioBox {
padding: 8px 16px;
background: #eaebed;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
/* margin-bottom: 20px; */
height: 10%;
box-sizing: border-box;
}
.audioControls {
width: 30px;
height: 30px;
}
.audioInfo {
justify-content: center;
.title {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
letter-spacing: 0.2px;
text-align: justify;
font-weight: 400;
margin-bottom: -8px;
}
.time {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
letter-spacing: 0.17px;
text-align: justify;
font-weight: 400;
}
}
</style>引用组件
<AudioPlayer fileUrl="../assets/music.mp3"></AudioPlayer>import AudioPlayer from "./components/AudioPlayer.vue";
export default {
components: {
AudioPlayer,
},
}注：注意使用组件设备所支持的音频和视频格式（搜索引擎进行查阅），不支持则无法显示组件或是功能无法使用
