Vue2项目中使用videojs播放mp4视频

步骤 1: 安装 Video.js

bash 复制代码
npm install video.js --save

步骤 2: 创建 VideoPlayer 组件

html 复制代码
<template>
  <div>
    <!-- Video.js player container -->
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css'; // 引入 Video.js 默认样式

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    },
    mp4src: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      player: null
    };
  },
  methods: {
    playerMedia() {
      this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
        console.log('Your player is ready!');
      });
      this.player.src({
        src: this.mp4src, // 替换为你的MP4视频URL
        type: 'video/mp4'
      });
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose(); // 清理资源
    }
  },
  watch: {
    mp4src: {
      handler: function(val) {
        val && this.playerMedia()
      },
      immediate: true,
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
.video-js {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
</style>
步骤 3: 在父组件中使用 VideoPlayer 组件
html 复制代码
<template>
  <div class="play">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="padding: 10px 0px"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="playDetail">
      <div class="playback">
        <p class="playback-title">
          {{ videoDetail['title'] }}
        </p>
      </div>
      <p class="introduction">
        简介:{{videoDetail['content']}}
      </p>
      <div class="play-video">
        <VideoPlayer style="width: 100%; height: 460px;" :options="playerOptions" :mp4src="videoDetail['src']" />
      </div>
    </div>
  </div>
</template>

<script>
import count from "@/api/home";
import VideoPlayer from "@/components/Lives/VideoPlayer.vue";
export default {
  components: {
    VideoPlayer
  },
  data(){
    return{
      playerOptions: {
        autoplay: true, // 是否自动播放
        controls: true, // 显示控制条
        sources: [],
        // poster: '/path/to/default.jpg' // 可选: 视频封面图片
      },
      videoDetail: {
        id: undefined,
        title: '',
        content: '',
        src: '',
      },
    }
  },
  created() {
    let id=this.$route.query.id;
    count.getVideoById({id}).then(res=>{
      console.log(res, '视频获取');
      const {code, msg, data} = res;
      if(code === 0 && msg === 'success') {
        for (const videoDetailKey in this.videoDetail) {
          if (data.hasOwnProperty(videoDetailKey)) {
            this.videoDetail[videoDetailKey] = data[videoDetailKey];
          }
        }
      }
    })
  },
};
</script>

<style lang="scss" scoped>
.play {
  width: 100%;
  height: 100%;
  padding: 64px 130px;
  background: #eee;
}
.playDetail {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
}
.playback {
  border-bottom: 1px solid #eee;
}
.playback-title {
  font-size: 24px;
  padding: 10px 0px;
  margin: 0;
  font-weight: bold;
}
.introduction {
  font-size: 14px;
  padding: 10px 0px;
  margin: 0;
  font-weight: bold;
}
.play-video{
    width: 100%;
    height: 460px;
}
</style>

在上面的示例中,首先引入videojs和video.js的CSS文件。然后创建了一个video标签,并使用ref属性来引用它。

在Vue组件的mounted钩子中,使用videojs初始化了播放器。将video标签传递给videojs构造函数,并在构造函数中传递了一些选项。然后,通过src方法将本地.mp4文件加载到播放器中,并使用play方法自动播放。

在组件销毁之前,使用了beforeDestroy钩子来销毁videojs播放器,以避免内存泄漏问题。

相关推荐
傻啦嘿哟22 分钟前
Python 办公实战:用 python-docx 自动生成 Word 文档
开发语言·c#
翻滚吧键盘26 分钟前
js代码09
开发语言·javascript·ecmascript
q5673152332 分钟前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说1 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js