程序员经验分享-hwhale

vue项目如何播放m3u8格式视频

2023-11-07

安装依赖

 npm install @easydarwin/easyplayer --save
 npm install copy-webpack-plugin@5.1.2 --save-dev

找到public/index.html

在node_modeols里面找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js和EasyPlayer.wasm两个文件复制到pubilc目录下

引入

	<script src="./EasyPlayer-lib.min.js"></script>

再要播放的地方

1、引入

import EasyPlayer from "@easydarwin/easyplayer"

2、注册

在components中

components:{EasyPlayer}

3、使用组件

在模板中

<EasyPlayer :id="Math.floor(Math.random()*1+1)" :videoUrl=item :live="true" />

4、样式自己调整

5、双击可全屏

结果

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

音视频

javascript

vue项目如何播放m3u8格式视频 的相关文章

随机推荐

  • 目标检测——Bridging the Gap Between Anchor-based and Anchor-free Detection via ATSS

    question1 1 什么是anchor based anchor free answer 1 目标检测算法一般可分为anchor based anchor free 两者融合类 区别就在于有没有利用anchor提取候选目标框 2 A a

  • QT学生信息管理系统

    QT学生信息管理系统 项目描述 效果图 登录页面 管理员页面 用户页面 数据库表 用户表 学生表 项目描述 使用QT5 14和SQLite3 本项目分为登录界面 管理员界面 用户界面等界面 使用QStackedLayout实现页面布局及切换

  • 10大网络安全攻击手段及防御方法总结（下）

    6 分布式拒绝服务 DDOS DDoS攻击本身不能使恶意黑客突破安全措施 但会令网站暂时或永久掉线 相关数据显示 单次DDOS攻击可令小企业平均损失12 3万美元 大型企业的损失水平在230万美元左右 DDoS旨在用请求洪水压垮目标Web服

  • JAVA求解【乱序整数序列两数之和绝对值最小】

    题目 给定一个随机的整数 可能存在正整数和负整数 数组 nums 请你在该数组中找出两个数 其和的绝对值 nums x nums y 为最小值 并返回这个两个数 按从小到大返回 以及绝对值 每种输入只会对应一个答案 但是 数组中同一个元素不

  • 移动端H5页面在微信浏览器内audio无法自动播放问题解决

    相信许多小伙伴都遇见过这话种情况 在微信浏览器内添加的audio 无法自动播放 之前写过好多那种活动页添加的背景音乐都可以自动播放 直到后来ios 增加了限制就出现了这个问题 怎么解决的只需给audio标签增加一个属性就可以解决如下图

  • 二、MySQL入门

    1 如何查看MySQL是否运行 1查看进程 root sc mysql ps awx grep mysqld 12953 pts 1 S 0 00 bin sh usr local mysql bin mysqld safe datadir

  • JVM运行原理及Stack和Heap的实现过程

    Java语言写的源程序通过Java编译器 编译成与平台无关的 字节码程序 class文件 也就是0 1二进制程序 然后在OS之上的Java解释器中解释执行 而JVM是java的核心和基础 在java编译器和os平台之间的虚拟处理器 注 本网

  • js wangEditor富文本编辑器

  • 收藏清单:Java测试相关资源汇总

    收藏清单 Java测试相关资源汇总 Virtual environments 虚拟化环境 Vagrant 配置简单可信赖的虚拟化环境管理工具 Docker docker就不用多说了 Performance stress load 性能测试

  • 36-Jenkins-Job迁移

    Job迁移 前言 1 安装插件 2 配置信息 3 使用插件 前言 本篇来学习Jenkins中如何快速迁移job 在工作中可能会遇到这样的场景 即需要把一个Jenkins上的job迁移到另外一台Jenkins上 那怎么做比较好呢 一起来学习下

  • Shader Graph2-PBR介绍之表面属性（图解）

    PBR的实现由光线和表面属性决定 下面我们介绍一下表面属性 这个5个属性在ShaderGraph的根节点是经常的看到 左侧是Unity中的 右侧是UE中的 在没有Metallic金属的情况下 基础颜色值就决定了颜色的漫反射值 也就是说基础颜

  • gitee在README.md中添加图片

    前言 在使用gitee的添加README md文件的时候 有时候会希望能放一些效果图来实现展示效果 实现步骤 1 在项目中添加你的效果图片 比如我的就放在 assets 1 png 然后提交上去 2 打开你的项目 找到刚到图片 然后点击 3

  • Elasticsearch学习系列一（部署和配置IK分词器）

    优质资源分享 学习路线指引 点击解锁 知识定位 人群定位 Python实战微信订餐小程序 进阶级 本课程是python flask 微信小程序的完美结合 从项目搭建到腾讯云部署上线 打造一个全栈订餐系统 Python量化交易实战 入门级 手

  • 基于深度学习的图像分类任务实现（二）卷积神经网络分类器&基于Residual Bolck的卷积神经网络分类器

    文章目录 1 代码编写思路 2 卷积神经网络分类器 2 1基本原理 2 2 代码实现 2 3 运行结果 3 基于Residual Bolck的卷积神经网络分类器 3 1基本原理 3 2代码实现 3 3模型结构可视化 3 4运行结果 实现多种

  • 【python实战】爬一爬某二手车的买卖数据

    获取当前页面下的车型的 表显里程 等数据 结果如下 直接讲代码实现 代码实现基本分四步 1 发送请求 2 获取数据 3 解析数据 4 保存数据 1 发送请求 import requests url https www XXX com chi

  • redis-dump 安装与简单使用

    redis dump是将redis和json互转的工具 redis dump是基于ruby开发 需要ruby环境 而且新版本的redis dump要求2 2 2以上的ruby版本 centos中yum只能安装2 0版本的ruby 需要先安装

  • Linux命令大全(手册）

    http man linuxde net

  • 超全面的前端工程化配置指南

    前端工程化配置指南 本文讲解如何构建一个工程化的前端库 并结合 Github Actions 自动发布到 Github 和 NPM 的整个详细流程 示例 我们经常看到像 Vue React 这些流行的开源项目有很多配置文件 他们是干什么用的

  • hive相关汇总

    hive 1 hive 有哪些方式保存元数据 各有哪些特点 2 hive内部表和外部表的区别 3 生产环境中为什么建议使用外部表 什么时候使用内部表 什么时候使用外部表 4 你们数据库怎么导入hive 的 有没有出现问题 5 简述Hive中

  • vue项目如何播放m3u8格式视频

    vue项目如何播放m3u8格式视频 安装依赖 找到public index html 再要播放的地方 1 引入 2 注册 3 使用组件 4 样式自己调整 5 双击可全屏 结果 安装依赖 npm install easydarwin easy

热门标签