VUE项目使用easyplayer.js实现海康视频监控

已于 2022-08-12 10:18:19 修改
阅读量4k 收藏 17
点赞数 1
文章标签： npm 前端 node.js
于 2022-08-12 09:26:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/poluocook/article/details/126296753
版权

做的一个项目里面有一个需求需要监控视频，但是项目的一些组件兼容问题，此次项目无法使用海康的视频插件。所以就使用了更简单的easyplayer.js组件。

首先安装easyplayer:

npm install @easydarwin/easyplayer --save

在VUE中调用

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录。

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录。

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录。

在 html 中引用 dist/component/EasyPlayer-lib.min.js

###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录。

上效果图：

（因为某些原因就不展示过多的监控画面了，所以用图片挡住了。）

代码部分：

这次项目我使用了官方的HTML DEMO所以就在vue里面iframe一下html页面。

首先在vue里面iframe


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  poluocook
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    17
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题

				
			

			

				

					zxstrive的专栏
				

				

					05-21
					
					971
					
				

			

		

		

			
				
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题及播放器刚开始接收不到流报错的解决方案

			
		

	



                

              
                



	

		

			

				
					
EasyPlayer.js 在VUE中使用 

				
			

			

				

					05-22
				

			

		

		

			
				
EasyPlayer.js 在VUE中使用 https://blog.csdn.net/u012848709/article/details/106291133

			
		

	



                


  
              

                


	

		

			

				
					
EasyPlayer.js:EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTPRTMPHTTP-FLVHLS(m3u8) live streaming & vod strea

				
			

			

				

					05-10
				

			

		

		

			
				
EasyPlayer.js
简介
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
功能说明
 支持 m3u8/HLS 播放;
 支持 HTTP-FLV/WS-FLV 播放;
 支持 H265 播放;
 支持直播和点播播放;
 支持全屏显示;
 支持重连播放；
集成使用示例
普通集成
1.引入
copy  EasyWasmPlayer.js 到项目中
copy libDecoder.wasm到项目或者www的根目录（一定要根目录）
2.在 html 中引用 EasyWasmPlayer.js
<!DOCTYPE html>
<html l

			
		

	





	

		

			

				
					
EasyPlayer.js：打造简洁高效的HTML5视频播放器

				
			

			

				

					gitblog_00012的博客
				

				

					03-25
					
					1587
					
				

			

		

		

			
				
EasyPlayer.js：打造简洁高效的HTML5视频播放器
项目地址:https://gitcode.com/tsingsee/EasyPlayer.js
EasyPlayer.js 是一个轻量级、高度可定制的HTML5视频播放器框架，由Tsingsee团队开发并维护。该项目旨在简化HTML5视频播放器的开发过程，让开发者能够快速构建功能丰富的自定义播放器，适用于各种网站和应用。
项目简介
E...

			
		

	



		

			
		



	

		

			

				
					
如何在Vue3中使用H.265视频EasyPlayer.js流媒体播放器？

					
最新发布

				
			

			

				

					AI与流媒体视频技术
				

				

					04-15
					
					1467
					
				

			

		

		

			
				
首先通过npm引入easyplayer.js。

			
		

	





	

		

			

				
					
vue项目中使用EasyPlayer.js播放视频

				
			

			

				

					weixin_56039168的博客
				

				

					03-15
					
					2342
					
				

			

		

		

			
				
项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。将这两个文件复制于public根目录下，不然会报错。二、复制文件于public的跟目录下。三、使用（直接上代码）

			
		

	





	

		

			

				
					
开发历程：网页视频流媒体播放器EasyPlayer.JS开发web H5网页播放H.265视频支持FLV与HLS直播与点播

				
			

			

				

					TSINGSEE青犀视频官方技术博客
				

				

					08-13
					
					2652
					
				

			

		

		

			
				
开发背景

在2019年之前，一直的理解就是H.265是无法在网页上进行解码播放的，直到我看到了金山云、阿里云的技术在LVS流媒体社区推送的关于wasm（WebAssembly）解码播放H.265视频的技术文章，才了解到互联网大厂果然是走在技术的最前沿，于是，我们经过反复的讨论和调研，再结合我们早期做原生的EasyPlayer的经验，开始有了对H.265 Web网页播放器研发的想法；

从2020年初有研发支持H.265编码格式的视频想法，到疫情期间的实现，再到现在对重连、丢包、花屏方面的优化，一直都是在一

			
		

	





	

		

			

				
					
H.265流媒体播放器EasyPlayer.js的属性、方法及事件的调用汇总

				
			

			

				

					TSINGSEE青犀视频官方技术博客
				

				

					06-01
					
					4475
					
				

			

		

		

			
				
用户在使用EasyPlayer.js时，表示想在自己的代码逻辑中控制一些相关的属性。今天我们就做一个汇总分享给大家。感兴趣的用户可以参照以下方法。

			
		

	





	

		

			

				
					
VUE2使用EasyPlayer.js实现H264，H265视频流播放

				
			

			

				

					m0_60086371的博客
				

				

					01-17
					
					6862
					
				

			

		

		

			
				
VUE2使用EasyPlayer.js实现H264，H265视频流播放

			
		

	





	

		

			

				
					
如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制？【附代码】

				
			

			

				

					TSINGSEE青犀视频官方技术博客
				

				

					05-25
					
					1287
					
				

			

		

		

			
				
用户在使用EasyPlayer.js时，有时候会需要控制音频，但是播放器默认的音频无法满足用户需求，于是想在自己的代码逻辑中增加控制音频的开启及开闭。我们可以通过以下方式实现。

			
		

	





	

		

			

				
					
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种

				
			

			

				

					08-12
				

			

		

		

			
				
EasyPlayer.js是一款强大的H5播放器，专为现代网页设计，提供对多种视频流协议的支持。这款播放器的核心特点在于其跨平台兼容性和灵活性，能够适应HTTP、HTTP-FLV以及HLS（m3u8）等不同类型的视频传输方式，从而实现...

			
		

	





	

		

			

				
					
EasyPlayer-element.min.js

				
			

			

				

					07-21
				

			

		

		

			
				
使用EasyPlay制作web播放器的时候使用。

			
		

	





	

		

			

				
					
EasyPlayer-RTSP

				
			

			

				

					12-06
				

			

		

		

			
				
EasyPlayer-RTSP工具，支持大华、海康等nvr设备的直播查看。

			
		

	





	

		

			

				
					
EasyPlayer.js-legacy.zip 支持rtmp流播放

				
			

			

				

					02-07
				

			

		

		

			
				
EasyPlayer.js是一个流行的开源JavaScript库，专为网页端视频播放设计。这个"EasyPlayer.js-legacy.zip"压缩包包含了该库的一个旧版本，特别强调了对RTMP流媒体播放的支持。在网页上实现RTMP（Real-Time Messaging ...

			
		

	





	

		

			

				
					
vue使用recorder.js实现录音功能

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue项目中实现录音功能，我们可以借助第三方库recorder.js。Recorder.js是一个轻量级的JavaScript库，用于在Web浏览器中录制音频。以下是如何在Vue中集成并使用recorder.js的详细步骤：  1. **引入外部JS文件**： ...

			
		

	





	

		

			

				
					
vue + typescript + video.js实现 流媒体播放 视频监控功能

				
			

			

				

					12-09
				

			

		

		

			
				
视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心跳，表明在线收看状态,需要后台持续发送视频数据。 1. yarn add video.js ...

			
		

	





	

		

			

				
					
【vue】Easy Player实现视频播放：

				
			

			

				

					SunPeng的博客
				

				

					01-01
					
					3473
					
				

			

		

		

			
				
【vue】Easy Player实现视频播放：

			
		

	





	

		

			

				
					
H265视频流媒体网页无插件播放器EasyWasmPlayer.js无法设置封面照排查及解决

				
			

			

				

					TSINGSEE青犀视频官方技术博客
				

				

					03-30
					
					586
					
				

			

		

		

			
				
基于EasyPlayer的研究基础，TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求，研发了H265网页播放器EasyWasmPlayer.js，在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。



之前我们在测试EasyWasmPlayer.js播放器时，为大家介绍了如何实现视频截图功能，截图可用于封面或者存档使用。据部分开发者反馈，支持H265的WasmPlayer.js可以播放，但无法调用setSnap设置封面图片。



初步判断是开发者创建Player失败，排

			
		

	





	

		

			

				
					
pannellum+video.js 全景视频播放

				
			

			

				

					yushikang1的博客
				

				

					07-16
					
					1086
					
				

			

		

		

			
				
使用 Pannellum,Video.js 播放全景视频
演示截图

video.js 传送门
pannellum 传送门
源代码
	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="utf-8">
	    <title>Pannellum Video Demo</title>
	    <link rel="stylesheet" href="https://cdn.pan

			
		

	





	

		

			

				
					
easyplayer.js 在vue中使用

				
			

			

				

					06-28
				

			

		

		

			
				
### 回答1：
要在Vue中使用easyplayer.js，需要先在Vue项目中引入easyplayer.js库文件。可以通过以下步骤来实现：

1. 在Vue项目中安装easyplayer.js库文件，可以使用npm或yarn命令进行安装。

2. 在Vue组件中引入easyplayer.js库文件，可以使用import语句进行引入。

3. 在Vue组件中使用easyplayer.js库文件，可以通过在模板中添加video标签，并设置相关属性来实现。

例如：

<template>
  <div>
    <video id="easyplayer" :src="videoUrl" autoplay></video>
  </div>
</template>

<script>
import EasyPlayer from 'easyplayer.js'

export default {
  data() {
    return {
      videoUrl: 'http://example.com/video.mp4'
    }
  },
  mounted() {
    const player = new EasyPlayer({
      id: 'easyplayer',
      url: this.videoUrl
    })
    player.play()
  }
}
</script>

在上面的例子中，我们首先在模板中添加了一个video标签，并设置了相关属性。然后在组件的mounted钩子函数中，创建了一个EasyPlayer实例，并调用了play方法来播放视频。   

### 回答2：
easyplayer.js 是一款基于HTML5的，兼容主流浏览器的视频播放器插件，支持各种格式的视频文件播放，同时还支持RTMP和HLS协议的视频流播放。其提供了完善的API和事件机制，可以轻松实现视频播放功能。

在Vue中使用easyplayer.js可以通过以下步骤：

1. 下载easyplayer.js插件，并将其添加到Vue项目中。

2. 在Vue组件中引入easyplayer.js，可以使用import或直接在HTML文件中引入。

3. 在Vue组件的data数据中添加一个videoUrl属性，用于保存视频文件的路径或视频流的地址。例如：data() {return { videoUrl: "http://example.com/demo.mp4" };}

4. 在Vue组件的模板中添加视频播放器组件，可以使用\<video>标签或创建Vue的插件组件。

5. 在Vue组件的方法中添加视频播放器的初始化函数，可以使用easyplayer.js提供的initPlayer方法进行初始化，并指定要播放的视频文件或流的地址，例如：

initPlayer: function(){
    var player = easyplayer.init({
        id: "video-player",
        url: this.videoUrl
    });
    player.play();
}

6. 在Vue组件的created钩子函数中调用视频播放器的初始化函数进行初始化。

7. 可以在Vue组件的其他钩子函数中添加视频播放器的相关事件和函数，例如onPlay、onPause和onEnded等，在视频播放器播放、暂停或结束时执行相应的操作。

8. 最后，在Vue组件中可以通过修改videoUrl属性的值动态切换要播放的视频文件或流的地址。

总之，在Vue中使用easyplayer.js可以实现强大的视频播放功能，使得用户可以轻松地观看各种格式的视频文件和流。同时，内置的API和事件机制使得视频播放器的定制和扩展变得非常容易。   

### 回答3：
在Vue中使用easyplayer.js可以通过以下步骤实现：

1. 首先需要在项目中引入easyplayer.js库文件，可以通过npm安装或直接下载。在Vue项目中多数情况下会选择安装，可以使用以下命令：

```
npm install easyplayer.js --save
```

2. 在Vue项目中，可以通过在`main.js`文件中的引入easyplayer.js的方式来创建一个全局组件。在`main.js`文件中写入以下代码：

```
import Vue from 'vue'
import EasyPlayer from 'easyplayer.js'

Vue.use(EasyPlayer)
```

3. 在Vue的单文件组件中即可直接使用EasyPlayer组件来呈现视频播放器。例如：

```
<template>
  <div>
    <easy-player
      :url="url"
      :options="{autoplay:true}"
      @play="onPlay"
      @pause="onPause"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'your-video-url',
    };
  },
  methods: {
    onPlay() {
      console.log('video play');
    },
    onPause() {
      console.log('video pause');
    },
  },
};
</script>
```

以上就是使用easyplayer.js在Vue中呈现视频播放器的基本流程。总体来说，easyplayer.js在Vue中的使用方式和在其他框架中的类似，只要按照官方文档的引入方法即可。同时也要留意easyplayer.js的版本兼容性问题，确保项目可以正常运行。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值