Video.js 视频播放器

2022-10-21 16:39:04

2025-02-06 00:43:21

官网

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编码格式就可以了（代码转码或者用软件转码，比如格式工厂软件）

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论