Video.js 视频播放器
2022-10-21 16:39:04
2025-01-16 18:10:01
官网
js
https://videojs.com/getting-started/#videojs-cdn
npm下载
js
pnpm add -S video.js
使用教程
vue
<template>
<video ref="videoRef" class="video-js vjs-default-skin" controls>
<source :src="dataSrc" />
</video>
</template>
<script setup lang="ts">
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
defineProps({
dataSrc: {
type: String,
default: () => '',
},
});
let player = ref('');
const videoRef = ref('');
onMounted(() => {
nextTick(() => {
player.value = videojs(videoRef.value);
});
});
</script>
<style scoped lang="scss">
.video-js {
width: 100%;
height: 100%;
}
</style>
常见问题
谷歌浏览器上传视频mp4格式,有的能播放,有的不能播放
浏览器兼容性问题,旧版本涉及专利问题,支持mp4的H264编码格式,所以把视频编码转一下就可以了,转成H264编码格式就可以了(代码转码或者用软件转码,比如格式工厂软件)
目录