vue3直播视频流easy-player

news2024/12/23 13:44:34

vue3直播视频流easy-player

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

 easyPlayer文件下载地址

https://download.csdn.net/download/weixin_42120669/89605739 

<template>
  <div class="container">
 
    <div style="width: 90vw;height: 90vh;">
      <easy-player
                    muted
                    aspect="16:9"
                    :autoplay="true"
                    :fluent="true"
                    :video-url="videoOptions.src"
                    live
                    stretch
                  />
    </div>
    
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
const videoOptions = reactive({
  src: "https://open.ys7.com/v3/openlive/33010718992817239405:33010691991327413475_1_1.m3u8?expire=1752744590&id=735549178981507072&t=c974322b0d61050dfd575f772e8a25e3621bb65f26cc61f331deca0bf3dd892c&ev=100&devProto=gb28181", //视频源
  type: "m3u8", //视频类型
});
 
</script>
 

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

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

相关文章

Vue进阶之Vue无代码可视化项目(九)

Vue无代码可视化项目—补充内容 背景介绍、方案设计Canvas Table创建一个新的vue项目普通表格的效果Canvas上手Canvas画表格-画基本表格CanvasTable处理事件系统CanvasTable表格滚动Vue组件封装思想拖拽组件 —smooth-dndDndDemo1.vueDndContainer.jsCanvasTable封装CanvasTabl…

LDR6020 iPad皮套一体式键盘充电方案解析

在移动办公与学习的浪潮中&#xff0c;iPad凭借其强大的性能与便携性&#xff0c;成为了越来越多人的首选设备。然而&#xff0c;随着工作与学习任务的日益复杂&#xff0c;单一的触控操作已难以满足高效、精准的需求。因此&#xff0c;搭配一款优秀的键盘成为了提升iPad使用体…

月木学途开发 3.1搭建CentOS虚拟机

安装CentOS 下载地址 &#xff1a;https://mirrors.aliyun.com/centos-vault/?spma2c6h.13651104.0.0.5f6612b2O7Cy9G 选择7.6.1810——isos——x86_64——CentOS-7-x86_64-DVD-1810.iso 安装 VMWare虚拟机 下载 下载地址&#xff1a;https://www.vmware.com/products/desktop…

分享c语言中一些实用的函数2

目录 一.头文件 1.sqrt()函数 2.sin&#xff0c;cos&#xff0c;tan函数 附加:宏定义π 3.exp函数 4.fabs函数 5.fmax函数 6.floor函数 7.log函数 附加&#xff1a;求一个数是几为数(运用floor函数和log函数) 8.pow函数 二.头文件 1.abs函数 附加: 一.头文件<…

详解HTTP协议版本(HTTP/1.0、1.1、2.0、3.0区别)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…

数据采集器

目录 1. 采集Redis 2. 采集MySQL 3. 采集容器 1. 采集Redis 出口商和集成 |普罗 米修斯 (prometheus.io) 发布 奥利弗006/redis_exporter (github.com) 在目标机器上安装redis 上传redis采集器包redis_exporter-v1.53.0.linux-amd64.tar.gz [rootharbor opt]# tar -xf …

web3 solana

网址&#xff1a;HACKQUEST 学习初衷&#xff1a; 1.web3概念较为小众&#xff0c;相比于web2&#xff0c;机会较多 2.有机会remote work&#xff0c;带着笔记本到处浪&#xff0c;听着就不错 3.面对越来越卷的国内&#xff0c;有机会并有能力拥抱国外job&#xff0c;感觉是…

安卓车载多屏互动副屏底部有黑线条NavigationBar分析

背景&#xff1a; 在学习了马哥的wms和多屏互动课程后&#xff0c;大家普遍都可以跟着做出如下图效果的多屏互动&#xff1a; 其实初略来看这个成果已经完成一个多屏互动项目大部分功能&#xff0c;但是其实还是有一些bug的存在&#xff0c;今天我们就来分析一下多屏互动相关的…

FPGA实现SDI视频接收转USB3.0传输,GS2971+FT601方案,提供4套工程源码和QT上位机源码

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的FPGA驱动USB通信方案FPGA基于GS2971的SDI视频解码方案FPGA基于FT601的USB3.0视频传输方案 3、详细设计方案设计原理框图SDI 相机GS2971-SDI解码芯片解读BT1120转RGB888图像缓存FT601-USB3.0芯…

计算机毕业设计选题推荐-校内跑腿业务系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

深入理解操作系统--绪论

文章目录 概述操作系统的基本概念多用户系统用户和组进程 小结 概述 最近在读操作系统&#xff0c;发现一些新的概念。写出来&#xff0c;让自己印象更深&#xff0c;希望也帮助一些不懂的朋友&#xff1b;但愿有所帮助吧。 操作系统的基本概念 计算机都包含操作系统的基本程…

自动化测试的回归策略!

在快速迭代的软件开发过程中&#xff0c;确保软件质量的稳定性和可靠性是每一个开发团队都面临的重要挑战。其中&#xff0c;回归测试作为验证软件变更后是否仍然满足原有需求的重要手段&#xff0c;其重要性不言而喻。而自动化测试的回归策略&#xff0c;正是为了应对这一挑战…

学习记录——day25 多线程编程 临界资源 临界区 竞态 线程的同步互斥机制(用于解决竟态)

目录 ​编辑 一、多进程与多线程对比 二、 临界资源 临界区 竞态 例1&#xff1a;临界资源 实现 输入输出 例2&#xff1a;对临界资源 进行 减减 例子3&#xff1a;临界资源抢占使用 三、线程的同步互斥机制&#xff08;用于解决竟态&#xff09; 3.1基本概念 3.2线…

C#实现数据采集系统-系统优化服务封装

系统优化-服务封装 现在我们调用modbustcp和mqtt都直接在Program,所有加载和功能都混合在一起,比较难以维护 类似asp.net core项目的Program.cs代码如下,构建服务配置和启动 要实现的效果,Main方法中就是一个服务启动,只需要几行代码 分析代码 这里分成两部分,一…

医疗健康类应用,适合采用哪些风格?本文归纳之,并附案例。

医疗健康类应用的设计风格应该注重用户友好性、专业性和清晰易懂。以下是一些适合医疗健康类应用采用的设计风格&#xff1a; 1. 清晰简洁的界面&#xff1a; 医疗健康类应用的界面设计应该简洁清晰&#xff0c;避免过多花哨的元素&#xff0c;让用户能够快速找到他们需要的信…

JAVA-案列练习-ATM项目

在JAVA入门学习后进行的项目练习——模拟ATM系统。 目录 1.设计内容和要求 2.代码实现 &#xff08;1&#xff09;ATM账号类的定义 &#xff08;2&#xff09;ATM类中的操作 &#xff08;3&#xff09;操作说明 3.总结 1.设计内容和要求 01 系统架构搭建&#xff0c;欢…

Spring Cloud全解析:注册中心之Eureka架构介绍

Eureka架构介绍 Eureka在设计时采用的是AP原则&#xff0c;是Netflix的一个子模块&#xff0c;用于微服务的服务注册与发现 P:Partition tolerance,网络分区容错。类似多机房部署&#xff0c;保证服务稳定性A: Availability&#xff0c;可用性C:Consistency &#xff0c;一致…

【时时三省】(C语言基础)函数递归

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ——csdn时时三省 什么是递归 程序调用自身的编程技巧称为递归。递归做为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法&#xff0c;它通常把一个大型复杂…

Jenkin:动态选择Git分支

Jenkin&#xff1a;动态选择Git分支 build时输入分支 构建的时候添加一个字符参数 选择设置的变量&#xff0c;需要用${}括起来 构建时的效果 build时下拉选择分支 安装Git 参数插件 添加git参数 选择设置的变量&#xff0c;需要用${}括起来 构建时的效果

如何在不同设备上检查您的 IP 地址?

IP 地址&#xff08;Internet 协议地址&#xff09;是网络上设备的唯一标识符。了解如何查找 IP 地址对于解决网络问题、设置网络设备和维护网络安全非常重要。本文将详细介绍如何在不同设备上检查 IP 地址&#xff0c;包括 Windows 计算机、Mac 计算机、智能手机&#xff08;A…