【Vue项目中使用videojs播放本地mp4的项目】

news2025/1/18 10:02:19

目录

    • 以下是一个使用video.js播放本地mp4文件的Vue项目代码示例:
    • 1. 首先,在终端中使用以下命令安装video.js和video.js插件:
    • 2. 在Vue组件中,引入video.js和videojs-youtube插件:
    • 3. 配置video-js.css文件,可以在`public/index.html`文件中添加以下代码:
    • 4. 现在,你可以在Vue组件中使用`<video>`标签来播放本地的mp4文件了:

在这里插入图片描述

以下是一个使用video.js播放本地mp4文件的Vue项目代码示例:

1. 首先,在终端中使用以下命令安装video.js和video.js插件:

npm install video.js
npm install videojs-youtube

2. 在Vue组件中,引入video.js和videojs-youtube插件:

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-youtube/dist/Youtube.js';

export default {
  mounted() {
    // 创建视频播放器实例
    const player = videojs(this.$refs.videoPlayer, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      techOrder: ['html5', 'youtube']
    });

    // 添加mp4格式视频源
    player.src({ type: 'video/mp4', src: 'your-local-file.mp4' });
    
    // 在组件销毁时销毁视频播放器实例
    this.$on('hook:beforeDestroy', () => {
      player.dispose();
    });
  }
};
</script>

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin" playsinline></video>
  </div>
</template>

3. 配置video-js.css文件,可以在public/index.html文件中添加以下代码:

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">

4. 现在,你可以在Vue组件中使用<video>标签来播放本地的mp4文件了:

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin" playsinline></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
  mounted() {
    const player = videojs(this.$refs.videoPlayer, {
      controls: true,
      autoplay: false,
      preload: "auto",
      techOrder: ["html5"],
    });

    player.src({
      type: "video/mp4",
      src: require("../../assets/video.mp4"),
    });

    this.$on("hook:beforeDestroy", () => {
      player.dispose();
    });
  },
};
</script>

在上述代码中,我们首先引入video.js和video-js.css文件,并在mounted生命周期钩子中创建了视频播放器实例。然后,我们通过player.src方法添加了mp4视频源,其中src属性传入的是本地mp4文件的路径。最后,在组件销毁前,通过player.dispose()方法销毁视频播放器实例。

请注意,上述代码中的require("../../assets/video.mp4")是一个示例,你需要替换成你实际项目中mp4文件的路径。

以上代码示例能够帮助你在Vue项目中使用video.js播放本地mp4文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1432284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python给word插入脚注

1.需求 最近因为工作需要&#xff0c;需要给大量文本的脚注插入内容&#xff0c;我就写了个小程序。 2.实现 下面程序是我已经给所有脚注插入了两次文本“幸福”&#xff0c;给脚注2到4再插入文本“幸福” from win32com import clientdef add_text_to_specific_footnotes(…

1-2 动手学深度学习v2-基础优化方法-笔记

最常见的算法——梯度下降 当一个模型没有显示解的时候&#xff0c;该怎么办呢&#xff1f; 首先挑选一个参数的随机初始值&#xff0c;可以随便在什么地方都没关系&#xff0c;然后记为 w 0 \pmb{w_{0}} w0​在接下来的时刻里面&#xff0c;我们不断的去更新 w 0 \pmb{w_{0}…

Unity制作随风摇摆的植物

今天记录一下如何实现随风摇摆的植物&#xff0c;之前项目里面的植物摇摆实现是使用骨骼动画实现的&#xff0c;这种方式太消耗性能&#xff0c;植物这种东西没必要&#xff0c;直接使用顶点动画即可。 准备 植物不需要使用标准的PBR流程&#xff0c;基础的颜色贴图加上法向贴…

使用_NT_SYMBOL_PATH在启动VS前设置PDB路径

一、背景 由于公司相关项目的开发管理方式&#xff0c;导致公司会存在多个分支的版本正在开发/测试中。 在这样的背景下&#xff0c;我的日常工作中有时会出现存在某个分支的项目软件的某个功能出现了问题需要我去排查解决&#xff0c;而我当前并不在该分支上开发。于是只能安装…

嵌入式linux移植篇之根文件系统(rootfs)

根文件系统首先是内核启动时所 mount(挂载)的第一个文件系统&#xff0c;系统引导启动程序会在根文件系统挂载之后从中把一些基本的初始化脚本和服务等加载到内存中去运行。单独的 Linux 内核是没法正常工作的&#xff0c;必须要搭配根文件系统。 根文件系统的目录结构 根文…

【SpringBoot】RBAC权限控制

&#x1f4dd;个页人主&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;SpringBoot⛺️稳重求进&#xff0c;晒太阳 权限系统与RBAC模型 权限 为了解决用户和资源的操作关系&#xff0c; 让指定的用户&#xff0c;只能操作指定的资源。 权限功能 菜单权限&a…

自建服务器监控工具uptime kuma

web服务器使用 雨云 提供的2核2g 这里使用1panel的uptime kuma 首先&#xff0c;如果你使用雨云&#xff0c;那么可以直接省去安装1panel的烦恼 直接选择预装后&#xff0c;等待部署完成即可看到面板信息&#xff0c;进入面板&#xff0c;点击应用商店 在应用商店里找到upti…

视云闪播截图

视云闪播截图 1. 截图设置2. 热键设置3. 视频截取3.1. 保存 -> 完成 References 深度学习图像数据获取工具。 视云闪播 https://www.netposa.com/Service/Download.html 1. 截图设置 视云闪播 -> 系统设置 -> 截图设置 2. 热键设置 视云闪播 -> 系统设置 ->…

C# CAD界面-自定义工具栏(三)

运行环境 vs2022 c# cad2016 调试成功 一、引用 二、开发代码进行详细的说明 初始化与获取AutoCAD核心对象&#xff1a; Database db HostApplicationServices.WorkingDatabase;&#xff1a;这行代码获取当前工作中的AutoCAD数据库对象。在AutoCAD中&#xff0c;所有图形数…

【数据结构与算法】(6)基础数据结构之栈的链表实现、环形数组实现示例讲解

目录 2.5 栈1) 概述2) 链表实现3) 数组实现4) 应用习题E01. 有效的括号-Leetcode 20E02. 后缀表达式求值-Leetcode 120E03. 中缀表达式转后缀E04. 双栈模拟队列-Leetcode 232E05. 单队列模拟栈-Leetcode 225 2.5 栈 1) 概述 计算机科学中&#xff0c;stack 是一种线性的数据结…

【新手必看】一键搭建幻兽帕鲁服务器全程指南

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

(6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理

目录 一、为什么要使用Adaboost建模? 二、泰坦尼克号分析(工作环境) (插曲)Python可以引入任何图形及图形可视化工具 三、数据分析 四、模型建立 1、RandomForestRegressor预测年龄 2、LogisticRegression建模 引入GridSearchCV 引入RandomizedSearchCV 3、Deci…

用Python Tkinter打造的精彩连连看小游戏【附源码】

文章目录 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验游戏简介技术背景MainWindow类:职责:方法:Point类: 主执行部分:完整代码&#xff1a;总结&#xff1a; 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验 在丰富多彩的游戏世界中&#xff0c…

Python 数据分析(PYDA)第三版(一)

原文&#xff1a;wesmckinney.com/book/ 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 关于开放版本 第 3 版的《Python 数据分析》现在作为“开放获取”HTML 版本在此网站wesmckinney.com/book上提供&#xff0c;除了通常的印刷和电子书格式。该版本最初于 2022 年…

逆向基础-破解密码

1.通过study PE查看.exe程序的位数 打开 x32dbg 从暂停到运行程序 原理&#xff1a;软件算出的密码与用户输入的密码作比较 破解流程&#xff1a;查信息 --> 找内存关键数据 --> 测试

STM32--SPI通信协议(1)SPI基础知识总结

前言 I2C (Inter-Integrated Circuit)和SPI (Serial Peripheral Interface)是两种常见的串行通信协议&#xff0c;用于连接集成电路芯片之间的通信&#xff0c;选择I2C或SPI取决于具体的应用需求。如果需要较高的传输速度和简单的接口&#xff0c;可以选择SPI。如果需要连接多…

基于NSGA-II的深度迁移学习

深度迁移学习 迁移学习是一种机器学习技术&#xff0c;它允许一个预训练的模型被用作起点&#xff0c;在此基础上进行微调以适应新的任务或数据。其核心思想是利用从一个任务中学到的知识来帮助解决另一个相关的任务&#xff0c;即使这两个任务的数据分布不完全相同。这种方法…

幻兽帕鲁服务器搭建记录,小白成功分享

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

重磅发布!使用 LangGraph 创建一个超级AI Agent

几天前&#xff0c;LangChain 正式宣布了名为 LangGraph 的新库&#xff0c;LangGraph 建立在 LangChain 之上&#xff0c;简化了创建和管理Agent及其运行时的过程。 在这篇文章中&#xff0c;我们将全面介绍 langGraph&#xff0c;什么是代理和代理运行时&#xff1f;Langgra…

【数据结构】排序---C语言版

七大排序算法 一、对于排序的分类&#xff1a;二、插入排序1、直接插入排序&#xff08;1&#xff09;基本思想&#xff1a;&#xff08;2&#xff09;直接插入排序&#xff1a;&#xff08;3&#xff09;代码实现&#xff1a;&#xff08;4&#xff09;总结&#xff1a; 2、希…