Vue中视频组件vue-video-player

已于 2022-10-22 14:34:01 修改
阅读量8.1k 收藏 28
点赞数 4
文章标签： vue.js javascript 前端
于 2022-08-02 09:40:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43777572/article/details/126021614
版权
本文介绍了如何在Vue项目中使用vue-video-player组件来展示视频，并提供全屏功能。首先通过npm安装指定版本的vue-video-player，然后在main.js中引入并配置。接着创建一个组件，将相关代码粘贴进去。在需要展示视频的页面中引入该组件，并在template中根据条件判断显示视频。最后，在methods中调用接口获取视频数据。
摘要由CSDN通过智能技术生成

 实现效果如图： 在页面中展示，可放大至全屏

1.安装  （因为最新版本有问题 我现在安装的版本是npm install vue-video-player@5.0.1 --save）

 npm install vue-video-player@5.0.1 --save

2.在main.js中添加

import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

2.建一个组件 

组件里面贴入代码


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  咕噜咕噜掉下mysta
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
VueDPlayer一个基于vue2和DPlayer的视频播放组件

				
			

			

				

					08-09
				

			

		

		

			
				
Vue-DPlayer一个基于vue2和DPlayer的视频播放组件。支持循环播放，自动播放，可选择语言，支持截屏，设置快捷键等。

			
		

	



                

              
                



	

		

			

				
					
推荐个好用的vue3播放器插件

				
			

			

				

					前端程序员、项目经理、人工智能博主
				

				

					04-28
					
					2549
					
				

			

		

		

			
				
这几天在做个播放器的功能，找了好几个都比较简介或者太花里胡哨的，但是猿粪在github上偶遇到个简洁且好看的播放器实在忍不住推荐给兄弟萌，好用的话可以去点点star，目前关注量还算挺不错github地址：https://github.com/xdlumia/vue3-video-play。

			
		

	



                


  
              

                


	

		

			

				
					
如何在Vue3中使用视频库Video.js实现视频播放？

					
最新发布

				
			

			

				

					有我更精彩的博客
				

				

					06-16
					
					2509
					
				

			

		

		

			
				
data() {return {},}],});},');});});},

			
		

	





	

		

			

				
					
vue视频播放组件

				
			

			

				

					qq_45868390的博客
				

				

					12-08
					
					1万+
					
				

			

		

		

			
				
vue视频播放组件（原生html封装）
PS：视频链接是后台爬虫抓取的
注意：this.$refs.video.src = this.videoUrl 此行很重要，在父组件传入src后，mounted里面进行赋值（没有出现跨域的问题，要么是链接失效，只要链接没问题就能播放）
<template>
  <!-- 视频查看 -->
  <div class="PlayVideo" v-if="show">
    <!-- 关闭按钮 -->
    <div

			
		

	



		

			
		



	

		

			

				
					
利用vue-video-player插件自定义制作视频功能

				
			

			

				

					Jun96505的博客
				

				

					08-29
					
					1714
					
				

			

		

		

			
				
安装依赖

　　cnpm install vue-video-player --save
引入样式// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内

require('vue-video-player/node_modules/video.js/dist/video...

			
		

	





	

		

			

				
					
Vue 视频播放插件vue-video-player

				
			

			

				

					达拉崩巴斑得贝迪卜多比鲁翁_
				

				

					09-23
					
					7236
					
				

			

		

		

			
				
安装
npm install vue-video-player --save

引入
可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）
【1】全局引用， 在main.js里面导入并引用
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
Vue.use(VideoPlayer)

【2】组

			
		

	





	

		

			

				
					
vue-video-player的使用方法，vue-video-player在移动端点击画面不触发事件&&不能暂停播放的解决方法

				
			

			

				

					insgo的博客
				

				

					01-06
					
					8045
					
				

			

		

		

			
				
单页面引用
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import VideoPlayerOption from "@/app/com/bean/VideoPlayerOption";

html
  <div class="video">
	<video-player
      class="video-player vjs-custom-skin"
    

			
		

	





	

		

			

				
					
视频播放：vue使用vue-video-player插件

				
			

			

				

					provence_20的博客
				

				

					12-09
					
					2059
					
				

			

		

		

			
				
1.安装插件


npm install vue-video-player -S

2.使用（我的是弹窗）

<template>

<el-dialog

:title="'视频播放'"

:close-on-click-modal="false"

:visible.sync="visible">



<el-form:...

			
		

	





	

		

			

				
					
Vue使用vue-video-player组件

				
			

			

				

					junx666的博客
				

				

					10-17
					
					1699
					
				

			

		

		

			
				
1.安装依赖（亲测5.0.1版本可用，最新版本会找不到'vue-video-player/src/custom-theme.css'这个样式）3.新建一个video.vue文件。2.在main.js中添加。

			
		

	





	

		

			

				
					
Vue中实现视频播放——vue-video-player、dplayer

					
热门推荐

				
			

			

				

					m0_46318298的博客
				

				

					08-11
					
					3万+
					
				

			

		

		

			
				
2、一些常见的函数和参数使用，完整代码如下。一、vue-video-player。

			
		

	





	

		

			

				
					
vue视频组件

				
			

			

				

					weixin_53954018的博客
				

				

					03-08
					
					213
					
				

			

		

		

			
				
【代码】视频组件。

			
		

	





	

		

			

				
					
VueAliPlayer一个基于viewaliplayer的Vue2x视频播放器组件

				
			

			

				

					08-10
				

			

		

		

			
				
Vue-AliPlayer一个基于view-aliplayer的Vue 2.x视频播放器组件

			
		

	





	

		

			

				
					
vue-video-player vue视频插件

				
			

			

				

					PS000109的博客
				

				

					08-28
					
					3800
					
				

			

		

		

			
				
vue-video-player vue视频插件

			
		

	





	

		

			

				
					
实战21 Vue集成视频播放组件

				
			

			

				

					shieryue_2016的博客
				

				

					12-14
					
					950
					
				

			

		

		

			
				
main.js文件全局引入。

			
		

	





	

		

			

				
					
Vue3视频播放器组件Vue3-video-play入门教程

				
			

			

				

					猿小白的博客
				

				

					03-11
					
					1万+
					
				

			

		

		

			
				
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。

			
		

	





	

		

			

				
					
vue-video-player 手机端使用postcss-pxtorem自适应大小

				
			

			

				

					w710537643的博客
				

				

					06-16
					
					1257
					
				

			

		

		

			
				
<template>
  <div class='videomp4' @dblclick="clickFun()">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
          

			
		

	





	

		

			

				
					
vue-video播放器

				
			

			

				

					huanhuan03的博客
				

				

					07-29
					
					904
					
				

			

		

		

			
				
vue-video-playervue video playervideo playervue playervue video

			
		

	





	

		

			

				
					
Vue视频插件（vue-video-player）

				
			

			

				

					qq_52151772的博客
				

				

					02-06
					
					7933
					
				

			

		

		

			
				
vue视频插件

			
		

	





	

		

			

				
					
使用vue-video视频播放组件

				
			

			

				

					weixin_42065178的博客
				

				

					04-18
					
					2466
					
				

			

		

		

			
				
vue的视频播放器组件使用

			
		

	





	

		

			

				
					
Vue3 视频播放插件vue-video-player

				
			

			

				

					05-31
				

			

		

		

			
				
Vue3 视频播放插件vue-video-player是一款基于Vue3和video.js的开源视频播放插件，它提供了一些自定义选项和事件来控制视频播放器的行为，同时也支持自适应大小、全屏播放等功能。使用vue-video-player，你可以轻松地将视频嵌入到你的Vue3项目中，实现视频播放功能。

该插件具有以下特点：

1. 支持多种视频格式：MP4、WebM、Ogg、FLV等。
2. 自适应大小：视频播放器会根据所嵌入的容器大小自适应调整大小。
3. 全屏播放：支持全屏播放功能，可通过按键或者双击视频进行切换。
4. 自定义选项：可以通过配置文件对视频播放器进行一些自定义设置，例如控制栏位置、皮肤等。
5. 事件监听：支持一些事件监听，例如播放、暂停、结束等。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值