目录

Video.js 视频播放器

Admin10/21/2022812 阅读

官网

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

评论

共 0 条
后参与评论
共 104 篇文章 感谢支持

RSS ·关于

© 2026 我的博客