vue中使用videojs
1.先去安装 videojs
npm i video.js
npm install videojs-contrib-hls --save
2.main.ts 或者main.js中引入
import “video.js/dist/video-js.css”;
3.按下面代码去写就可以实现视频播放
<template>
<div class="center">
<div v-show="!isError">
<video
id="videobox"
class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
preload="auto"
width="100%"
ref="videoRef"
autoplay="false"
>
<p class="vjs-no-js">不支持播放</p>
</video>
</div>
<div v-show="isError" class="errorTip"><p>视频出错了!</p></div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import videojs from "video.js";
export default defineComponent({
setup() {
var isError = ref<boolean>(false);
var videoSrc = ref<string>("");
var videoRef = ref();
var player = ref();
console.log(videoSrc.value, "视频");
onMounted(() => {
init();
console.log(player.value);
});
const init = () => {
player.value = videojs(
videoRef.value,
{
//视频源
sources: [
{
src: "https://vjs.zencdn.net/v/oceans.mp4",
type: "video/mp4",
},
{
src: "https://vjs.zencdn.net/v/oceans.mp4",
type: "video/webm",
},
],
//是否显示播放按钮
bigPlayButton: true,
playbackRates: [0.5, 1, 1.5, 2],
controls: true,
//设置小喇叭音量键
controlBar: {
fullscreenToggle: true,
// 音量条的横向还是纵向显示
volumePanel: {
inline: false,
},
},
},
() => {
player.value.on("play", () => {
console.log("开始播放");
});
//设置默认2倍速
player.value.playbackRate(2);
}
);
};
return { isError, videoRef };
},
});
</script>
<style scoped>
/*base code*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
-ms-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
</style>