vue3集成video.js

学习使我快乐——玉祥

已于 2024-02-01 11:44:45 修改

阅读量935

点赞数 9

文章标签： javascript 开发语言 ecmascript

于 2024-02-01 10:39:29 首次发布

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/135968537

版权

本文介绍了如何在Vue项目中安装和使用video.js库，展示了创建包含视频源、控制选项和自定义设置的HTML模板，并在mounted钩子中初始化视频播放。

摘要由CSDN通过智能技术生成

就长这个样子，该有的功能都有了

首先安装

npm install video.js

然后创建一个vue文件

<template>
  <div class="full"  style="padding: 10px;overflow: auto;">
    <video :id="videoId" class="video-js"></video>
  </div>
</template>
<script setup lang="ts">
import { onMounted} from "vue";
import videojs from "video.js";
import 'video.js/dist/video-js.css';
const videoId="video_"+new Date().getTime();

onMounted(()=>{
  var player = videojs(videoId, {
    sources: [{
      src: 'http://xxx/xxx/test.mp4',
      type: 'video/mp4'
    }],
    controls: true,
    fluid: true,
    preload: 'auto',
    autoplay: true,
    playbackRates: [0.5,0.75,1, 1.25, 1.5, 2,3,4,5],
    language:'zh-CN',
    nativeControlsForTouch: false,
  });
});

</script>
<style scoped>

</style>