Vue中使用vue-video-player插件播放本地mp4视频文件

news2024/11/13 8:51:50

场景

若依前后端分离版手把手教你本地搭建环境并运行项目:

若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

在上面搭建项目的基础上,先实现了播放rtmp视频流

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流:

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流_霸道流氓气质的博客-CSDN博客_video.js-flash

如果需要在本地模拟出播放视频效果,需要播放本地的mp4文件。

 

注:

博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、同上面流程一样,安装vue-video-player插件

npm install vue-video-player --save

这里只安装这一个插件即可

2、页面中局部引入

import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'

在components中声明

  components: {
    videoPlayer,
  },

3、页面添加播放器

    <div id="playWnd" class="playWnd">
      <videoPlayer
        class="vjs-custom-skin videoPlayer"
        ref="videoplayer"
        :playsinline="true"
        width="800px"
        height="600px"
        :options="playerOptions"
        customEventName="changed"
      >
      </videoPlayer>

4、设置播放器的相关属性

      playerOptions: {
        width: "800px",
        height: "600px",
        language: "zh-CN",
        muted: true,// 默认情况下将会消除任何音频
        autoplay: true,// 如果true,浏览器准备好时开始回放。
        controls: false, //不显示暂停、声音、进度条组件
        loop: true, // 视频一结束就重新开始。
        sources: [
          {
            type: "video/mp4",
            src: "/video/video2.mp4" // url地址
          },
        ],
      },

注意这里的url对应的路径是

 

5、完整示例代码

<template>
  <el-dialog
    title="视频监控"
    :visible.sync="videoOpen"
    width="800px"
    height="600px"
    append-to-body
    @close="videoClose"
    class="video_box"
  >
    <!--视频窗口展示-->
    <div id="playWnd" class="playWnd">
      <videoPlayer
        class="vjs-custom-skin videoPlayer"
        ref="videoplayer"
        :playsinline="true"
        width="800px"
        height="600px"
        :options="playerOptions"
        customEventName="changed"
      >
      </videoPlayer>
    </div>
  </el-dialog>
</template>

<script>

import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'
export default {
  name: "HkVideo",
  components: {
    videoPlayer,
  },
  data() {
    return {
      videoOpen: false,
      playerOptions: {
        width: "800px",
        height: "600px",
        language: "zh-CN",
        muted: true,// 默认情况下将会消除任何音频
        autoplay: true,// 如果true,浏览器准备好时开始回放。
        controls: false, //不显示暂停、声音、进度条组件
        loop: true, // 视频一结束就重新开始。
        sources: [
          {
            type: "video/mp4",
            src: "/video/video2.mp4" // url地址
          },
        ],
      },
    };
  },
  destroyed() {},
  methods: {
    //预览功能
    preview() {
      console.log("preview");
    },
    //停止全部预览功能
    stopAllPreview() {},
    //关闭视频窗口
    closeWindow() {},
    // 查看摄像
    videoChange() {
      this.videoOpen = true;
      //模拟摄像头预览
    },
    // 关闭摄像头弹窗
    videoClose() {
      this.videoOpen = false;
      this.closeWindow();
    },
  },
};
</script>
<style scoped lang="scss">
.video_box {
  width: 100%;
  height: 100%;
}

.plugin {
  width: 100%;
  height: 100%;
}

.playWnd {
  width: 800px;
  height: 600px;
  margin: 0;
}

.video_box {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
}
</style>

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

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

相关文章

Unity Animancer插件(一)基本使用

Animancer是什么&#xff1f;资源商店主页 一、快速播放 我们来通过Animancer实现一个最基本的动画播放效果。 首先创建一个脚本PlayAnimationOnEnable&#xff0c;编写如下代码 public AnimancerComponent animancer; public AnimationClip clip;private void OnEnable() …

pinia 持久化存储

pinia刷新数据持久化解决方案 无论是使用vuex 还是pinia都会面临一个问题&#xff1a;页面刷新&#xff0c;状态数据丢失的问题&#xff1b; 为了解决数据状态持久化问题&#xff0c;可以考虑使用插件 pinia-plugin-persistedstate 目录 安装pinia 并引入使用 npm install pin…

CCES软件如何来对ADI的SHARC DSP进行Flash的编程和烧写

如何做 Flash 烧写并实现脱机运行&#xff0c;其实我在之前的文章里有讲过&#xff0c;就可以用 Visual DSP来做&#xff0c;鼠标 点几下&#xff0c;非常简单。但是很多客户用的是 21569、21565这一类的SHARC DSP&#xff0c;不能再用 VDSP 来做烧写了&#xff0c;所以我想了 …

留学Essay写作怎么积累更多词汇量?

大部分留学生们都会感觉Essay挺难写作的&#xff0c;然而这其实是自身平时积累的不够多。当然&#xff0c;还有其他的正确方法&#xff01;高分的Essay都是平时练习出来的&#xff0c;所以我们需要在平时多注意收集一些相关的写作知识。下面是一些常用的Essay写作词汇&#xff…

5 年经验年薪百万,一位阿里 P8 分享自己的成长干货

今天这篇文章&#xff0c;我前后读了 3 遍&#xff0c;主人公是阿里最年轻的 P8 之一&#xff0c;工作五年连升三级&#xff0c;他在一次采访中分享了自己的成长经历和职场心得&#xff0c;非常接地气&#xff0c;我们整理了 一下&#xff0c;真诚地推荐给每一个渴望成长和进步…

基于主成分分析的支持向量机入侵检测系统

基于主成分分析的支持向量机入侵检测系统学习目标&#xff1a;学习内容&#xff1a;A. 数据集分析B. 主成分分析 (PCA)--降维C. 支持向量机 (SVM)核函数数据集预处理--转换数据集预处理 --特征缩放算法过程核函数对比总结不足参考论文申明&#xff1a; 未经许可&#xff0c;禁止…

ESB产品Oracle数据库升级说明

ESB企业服务总线平台作为支撑企业综合集成的产品&#xff0c;在应用集成、数据集成、数据治理等解决方案都发挥着非常重要的作用。随着产品和解决方案的不断优化和升级&#xff0c;ESB企业服务总线平台功能需要逐步进行完善&#xff0c;不断提升产品功能的完备性、易用性和全面…

Github最新霸榜,Alibaba架构师手写的分布式系统核心原理手册

前言&#xff1a; 分布式的重要性就不需要我再强调了吧&#xff0c;它现在已经是大厂面试的“常驻嘉宾”了 前几天有粉丝在后台跟我吐槽&#xff1a;鑫哥&#xff0c;我觉得现在的风气真的变了&#xff0c;之前只觉得网上的情况是个例&#xff0c;结果自己就遇到了很多次&…

东方甄选、交个朋友迎头而上,云集不进则退

配图来自Canva可画 社交电商、会员电商、精选电商&#xff0c;多个定位描绘出云集的“求变史”。 2015年前后&#xff0c;社交电商概念崛起&#xff0c;拼多多靠“砍一刀”、“拼团”快速成长&#xff0c;云集也学着借助社交平台微信的传播途径&#xff0c;通过社交互动、用户…

【论文笔记】DEEP FEATURE SELECTION-AND-FUSION FOR RGB-D SEMANTIC SEGMENTATION

论文 题目&#xff1a;DEEP FEATURE SELECTION-AND-FUSION FOR RGB-D SEMANTIC SEGMENTATION 收录于&#xff1a;ICME 2021 论文&#xff1a;Deep Feature Selection-And-Fusion for RGB-D Semantic Segmentation | IEEE Conference Publication | IEEE Xplore [2105.04102]…

[附源码]Python计算机毕业设计Django学生宿舍维修管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

仿QQ音乐(HTML+CSS)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

[安装] Doris集群搭建环境

参考文献 参考链接 推荐指数 Doris集群安装部署&#xff08;详细&#xff09; [火][火][火][火][火] Doris学习笔记之数据表的创建 [火][火][火] doris官网0.15版本的安装部署 [火][火][火][火][火] Doris0.15升级到1.1.1 [火][火][火][火][火] [说明] Doris使用…

7个有用的Pandas显示选项

Pandas是一个在数据科学中常用的功能强大的Python库。它可以从各种来源加载和操作数据集。当使用Pandas时&#xff0c;默认选项就已经适合大多数人了。但是在某些情况下&#xff0c;我们可能希望更改所显示内容的格式。所以就需要使用Pandas的一些定制功能来帮助我们自定义内容…

Word控件Spire.Doc 【图像形状】教程(13): 如何在C#中对齐word文档上的形状

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

poi-tl实现对Word模板中复杂表格的数据填充

文章目录前言what poi-tlwhy poi-tlHow poi-tl1. 版本问题2. 集成和使用3. SpringEL表达式总结前言 开发时, 我们有时需要进行word类型表格导出, 而对于表格操作. 我们一般可能会倾向于使用 poi 进行操作. 但poi操作比较复杂, 所以就在寻找一种可以快速将内容填充到表格中的工具…

yolov7配置与训练记录(二)

yolov7配置与训练记录(一) 已经完成了环境的配置,下面开始文件内部的操作 yolov7官方下载地址为 git clone https://github.com/WongKinYiu/yolov71 将下载好的预训练权重放在yolov7-main/weights内 需要在yolov7中新建weights文件夹(也是为了方便管理权重文件) 测试 pyth…

单调队列算法总结

背景 单调队列&#xff0c;即为单调递减或者单调递增的队列。队列中的元素只能在队尾入队、从队首或者队尾出队。 单调队列的基本实现就是维护一个双向队列&#xff0c;只有当一个元素是当前最值、或者可能成为最值时才保留&#xff0c;否则出队。 单调队列通常用来解决在滑…

NR 大规模天线设计--1

参考《无线系统设计与国际标准》 概述 空间自由度是多天线系统获得性能增益的源泉。随着有源天线技术理论的出现&#xff0c; 为MIMO维度的扩展奠定了理论基础&#xff0c;有源天线技术在商用移动通讯领域的发展&#xff0c; 对天线的进一步扩展&#xff0c;尤其对信道垂直维…

Java常用API

Java常用API什么是API&#xff1f;Object类的作用:Object类的常用方法&#xff1a;Object的toString方法&#xff1a;Obiect的equals方法ObiectsStringBuilderMathSystem类概述BigDecimal什么是API&#xff1f; 1.API应用程序编程接口。 2.简单来说&#xff1a;就是Java帮我们…