Vue中使用EasyPlayer播放H265视频流

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

需求说明

需要在Vue2的项目中使用EasyPlayer进行H265视频流的播放。使用官方的最新版本加载H265会有问题。一直处于加载中…

实现步骤

  1. 引入easyplayer,这里最开始引入了最新版会有问题,因此引入的是3.3.12版本,可参照官方文档进行配置。
    EasyPlayer示例及使用说明
npm install @easydarwin/easyplayer@3.3.12 --save
  1. 在static文件夹中引入对应EasyPlayer.swf,crossdomain.xml,EasyPlayer-lib.min.js。并且需要在index.html中引入Easyplayer-lib.min.js 和jquery.min.js(版本:1.10.2)
 <script src="/static/jquery.min.js"></script>
 <script src="/static/EasyPlayer-lib.min.js"></script>

Vue中使用EasyPlayer播放H265视频流
3.引入copy-webpack-plugin 。这里用到的版本是4.0.1,其实这里就是为了将对应的几个文件复制到网站的根目录。如果是H265的视频流就会去请求EasyPlayer.wasm这个文件。最开始没有使用这个,仅仅是在static中引入了对应的文件,加载H265视频流的话,请求EasyPlayer.wasm,每次都会返回index.html。应该是没有找到对应的文件文章来源地址https://www.toymoban.com/news/detail-437134.html

npm install copy-webpack-plugin --save-dev
  1. 关键部分(将对应的文件复制到网站根目录)webpack.dev.conf.js中
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets 重点是这个位置,其他的不用管
    new CopyWebpackPlugin([
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm'
      },
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml'
      },
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js'
      },
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
  1. webpack.prod.conf.js中关键代码,plugs中增加代码
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
	new CopyWebpackPlugin([
	      {
	        from: path.resolve(__dirname, '../static'),
	        to: config.build.assetsSubDirectory,
	        ignore: ['.*']
	      }
	    ])
]
  1. 测试
<template>
  <div class="main-box">
    <EasyPlayer :videoUrl="videoUrl" :aspect="aspect" :live="live"  :fluent="fluent" :autoplay="autoplay"
      stretch></EasyPlayer>
       
  </div>
</template>
<script>
  import EasyPlayer from "@easydarwin/easyplayer";
  export default {
      data(){
          return{
            aspect:"16:9",
            live:true,
            fluent:true,
            autoplay:true,
            videoUrl:"这个地方放测试播放地址"
          }
      },
    components: {
      EasyPlayer,
    },
    method(){

    }
  }

</script>
<style scoped>
    .main-box{
        width: 650px;
        height: 600px;
    }
</style>

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

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

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

相关文章

  • 【vue Dplayer】播放hls视频流

    安装Dplayer和hls.js 准备测试流 hls测试地址:(截止2023.08.08有效) http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8

    2024年02月13日
    浏览(38)
  • 【vue2】前端如何播放rtsp 视频流,拿到rtsp视频流地址如何处理,海康视频rtsp h264 如何播放

    最近在写vue2 项目其中有个需求是实时播放摄像头的视频,摄像头是 海康 的设备,搞了很长时间终于监控视频出来了,记录一下,放置下次遇到。文章有点长,略显啰嗦请耐心看完。 测试?测试什么?测试rtsp视频流能不能播放。 video mediaplay官网 即(VLC) 下载、安装完VLC后

    2024年02月05日
    浏览(55)
  • electron+vue网页直接播放RTSP视频流?

    目前大部分摄像头都支持RTSP协议,但是在浏览器限制,最新版的浏览器都不能直接播放RTSP协议,Electron 桌面应用是基于 Chromium 内核的,所以也不能直接播放RTSP,但是我们又有这个需求怎么办呢? 市场上的方案很多,有很多免费开源的,同时也有比较成熟的商业软件,丰俭

    2024年02月02日
    浏览(57)
  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(55)
  • 在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案

    1.服务器转流前端转码方案 服务器端先把RTSP流用Web Socket或WebRTC推送到前端,再通过WASM转码MP4播放。此方案虽号称是无插件方案,但是需要服务器支持,两次转码导致延迟较高,一般高达数秒甚至数分钟。此方案首屏画面显示很慢。因为需要服务器不断转码转流,对CPU和内存

    2024年02月05日
    浏览(47)
  • 关于vue播放flv,m3u8视频流(监控)的方法

    前文: 随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8。 一、 JessibucaPlayer插件用来播放flv流 1.首先是先把文件放在vue项目的public下面 2.在

    2023年04月15日
    浏览(89)
  • 前端VUE播放RTSP、RTMP、HLS、FLV视频流的解决方案

    最近有个需求是前端在浏览器显示摄像头传回的RTSP视频流,我和后端都没做过视频流的项目,所以一步步摸索过来,方法和经验供大家参考。前端采用的技术有VUE+video.js+flv.js 从上图可以看出,RTSP流不能直接在浏览器播放,所以需要转码: RTMP的流需要在浏览器中用flash播放

    2024年02月06日
    浏览(59)
  • Java后端接口返回视频流,使用video组件播放视频,实现分段下载

    视频文件保存在不为人知的地方,总之前端不能直接访问的位置,需要通过后端接口取出来再返回给前端。 前端这样子播放 src=后端接口 如果后端直接这样子写 小视频问题不大,视频大的话会卡顿很久,查看请求发现会先请求下载完整视频后开始播放。而且不能拖动进度条

    2024年02月12日
    浏览(46)
  • 使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流

    官方教程:https://help.aliyun.com/document_detail/125570.htm?spm=a2c4g.11186623.0.0.4a3b125de04RLI#task-1997027 在 vue 项目中的 index.html 文件中,引入视频资源 封装组件 base_video_Flv : 组件调用: web前端HTML播放HLS在线视频流(m3u8): https://blog.csdn.net/Evil_0_0_0/article/details/105768336

    2024年02月06日
    浏览(50)
  • 68、使用aws官方的demo和配置aws服务,进行视频流上传播放

    基本思想:参考官方视频,进行了配置aws,测试了视频推流,rtsp和mp4格式的视频貌似有问题,待调研和解决 RTSP测试地址 来自上述网站 第一步:1) 进入aws的网站,然后进入ioT Core

    2024年02月11日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包