vue中使用EasyPlayer播放监控视频HLS,H265、H264

这篇具有很好参考价值的文章主要介绍了vue中使用EasyPlayer播放监控视频HLS,H265、H264。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.使用npm下载依赖

npm  install  --save  easy-player

2.将EasyPlayer-lib.min.js文件、EasyPlayer.wasm文件、libDecoder.wasm文件放置到public下

<easy-player video-url=

3.创建components,html代码如下

<template>
  <div class="player-box" :style="{ width: width, height: height }">
    <EasyPlayer
      style="width: 100%; height: 100%"
      :videoUrl="videoUrl"
      :showEnterprise="false"
      :show-custom-button="false"
      :autoplay="true"
    />
  </div>
</template>

4.使用props接收数据

  props: {
    // 视频地址
    videoUrl: {
      type: String,
      default: "",
    },
    // 容器id
    id: {
      type: String,
      default: "",
    },
    // 容器宽度
    width: {
      type: [Number, String],
      default: "100%",
    },
    // 容器高度
    height: {
      type: [Number, String],
      default: "100%",
    },
  },

5.在父组件中引入,传递props中的数据即可运行即可文章来源地址https://www.toymoban.com/news/detail-768366.html

到了这里,关于vue中使用EasyPlayer播放监控视频HLS,H265、H264的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • wireshark提取视频数据之RTP包中提取H264和H265

    在流媒体相关问题分析时,抓包分析是非常重要的手段,比如播放有码流无图像、流媒体协议对接问题、码流花屏卡顿等问题,很多问题都可以通过抓包然后分析包数据来定位出问题,抓包最常用的工具是wireshark,其能从数据链路层、IP层、传输层、应用层等各层进行分析,

    2024年02月02日
    浏览(52)
  • 【音视频处理】转编码H264 to H265,FFmpeg,代码分享讲解

    大家好,欢迎来到停止重构的频道。 本期我们讨论音视频文件 转编码 ,如将视频H264转H265等。 内容中所提及的 代码都会放在GitHub ,感兴趣的小伙伴可以到GitHub下载。 我们按这样的顺序展开讨论:​ 1、  编码的作用  2、  转编码的工作原理 3、  编解码器安装  4、  示

    2024年02月11日
    浏览(49)
  • 基于GB28181-2022实现web无插件播放H265视频

            目前发布的GB28181-2022增加了对前端设备视频H265编码格式的支持,所以实现国标平台通过浏览器对H265视频流的无插件的解码播放将是未来的趋势。         目前大多的方案都是通过平台端把H265转码为H264,再推送到web前端进行解码播放,这种方式因为需要中间的媒体

    2024年02月06日
    浏览(44)
  • H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复

    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直

    2024年02月10日
    浏览(58)
  • 【FAQ】H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复

    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直

    2024年02月11日
    浏览(57)
  • 前端实现H265编码的m3u8视频流播放

    前言 视频监控是智慧城市、智慧园区等WebGIS类系统中最为常见的硬件对接设备,最常用的监控视频流格式为m3u8格式,但是m3u8格式通常都是h.265编码格式的,我搜遍了几乎所有前端视频播放插件,几乎普通的播放器插件都不支持h.265格式的视频编码。本文就带领大家了解H265视

    2024年01月18日
    浏览(51)
  • vue项目中使用EasyPlayer.js播放视频

    项目中最近需要接摄像头的监控画面,一开始用了市面上一些别的插件,发现有些视频能播放,有些不能播放,最后发现是摄像头码流的问题,很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头,都是h265的编码格式。 一、插件下载 npm install copy-webpack-

    2024年02月12日
    浏览(39)
  • VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频

    简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大; 功能支持 : 支持 MP4 播放 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; 支持全屏或比例显示; 自动检测 IE 浏览器兼容播

    2024年02月02日
    浏览(48)
  • 浏览器不需要安装插件,前端播放在线视频方案,几款播放器介绍,hls协议下的h.265视频播放方案推荐

    一般我们播放本地视频都是使用 video标签,但是 video 元素只支持三种视频格式:MP4、WebM、Ogg ,对于在线视频直接使用video是没法播放的,这里介绍几款这两天我在做播放在线监控视频功能时使用过的几款播放器,初次接触流媒体踩了一堆坑,到目前为止对这部分内容都还了

    2024年02月08日
    浏览(50)
  • SkeyeRTMPClient扩展支持HEVC(H.265)解决方案之兼容H264和H265帧数据解析详解

    在之前两篇关于SkeyeRTMPClient扩展支持HEVC(H.265)解决方案的文章中,我们已经完成了对H265的支持,本文主要阐述将H26和H265支持兼容起来,实现不同视频编码格式的自适应兼容适配。 1. 根据CodecId判断数据编码类型 根据视频编码ID判断视频编码类型,如果视频编码ID==FlvCodeId_Hevc(

    2023年04月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包