基于video.js 的在线播放功能

最新推荐文章于 2024-06-16 15:54:56 发布
最新推荐文章于 2024-06-16 15:54:56 发布
阅读量5.8k 收藏 3
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzy99/article/details/70740435
版权

  因为在此次项目中需要实现在线播放视频的效果. 所以上网百度了一下相关的插件, 最后决定选用基于html5的video.js插件来实现.

video.js也是开源免费的，下载十分方便. 

  1.    首先下载 video.js插件 ，下载地址http://download.csdn.net/detail/tanksyg/8104769
  2.    下载之后解压, 主要用到的资源文件是 video.js , video-js.min.css.在html 或 jsp页面首先导入这两个资源文件


	<link href="${rc.contextPath}/statics/css/video-js.min.css" rel="stylesheet">
	<script src="${rc.contextPath}/statics/libs/video.min.js"></script>
 

 

 

以下是官网上给出的简单使用方法, 因为我们只是要求能在线播放就行, 对其他样式什么的要求不大,所以
 

这个简单例子就足够用了.
 

 

	<!DOCTYPE HTML>
	<html>
	<head>
  

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  999青峰
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
视频播放插件(video.js)

				
			

			

				

					qq_38005650的博客
				

				

					06-14
					
					1320
					
				

			

		

		

			
				
一.视频播放插件1.插件描述：Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版 ）2.Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTM...

			
		

	



                

              
                



	

		

			

				
					
video插件实现视频在线播放

				
			

			

				

					12-20
				

			

		

		

			
				
不支持ie8

			
		

	



                


  
              

                


	

		

			

				
					
Videojs在线播放MP4、HLS、FLV、RTMP视频流在线示例与代码

				
			

			

				

					renyuhost的博客
				

				

					03-27
					
					394
					
				

			

		

		

			
				
Videojs播放FLV、HLS、RTMP视频流在线示例与代码，可在线预览与演练，支持输入自定义地址进行播放

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

					有我更精彩的博客
				

				

					06-16
					
					2293
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
使用videojs来实现视频拖拽在线播放web端

					
热门推荐

				
			

			

				

					my_interface的博客
				

				

					03-04
					
					1万+
					
				

			

		

		

			
				
先下载video.js。

video的官方js文档：https://docs.videojs.com/

其他的简介文档：http://www.jq22.com/jquery-info404



1.html页面显示的信息

页面显示的信息


··<%@ page contentType="text/html;charset=UTF-8"%>

<html>
&lt...

			
		

	





	

		

			

				
					
VUE使用video-player在线播放视频

				
			

			

				

					jq.wang
				

				

					06-02
					
					3017
					
				

			

		

		

			
				
1.安装
npm install vue-video-player --save
2.全局引用， 在main.js里面导入并引用
import VideoPlayer from “vue-video-player”;
import hls from “videojs-contrib-hls”;
require(“video.js/dist/video-js.css”);
require(“vue-video-player/src/custom-theme.css”);
Vue.use(VideoPlayer

			
		

	





	

		

			

				
					
Video标签播放视频(动态视频URL)

				
			

			

				

					moranrun的博客
				

				

					12-13
					
					5104
					
				

			

		

		

			
				
我这里使用的为angular.js， 不过其他的前端框架应该也差不多，只是html和js的不同，这里使用后台返回的视频数据流读取，直接上代码:

java代码:



html代码:



js代码:



还需要一个关闭视频弹窗后的重置事件，代码如下:








...

			
		

	





	

		

			

				
					
Video.js 播放m3u8视频

				
			

			

				

					01-22
				

			

		

		

			
				
首先，要在Video.js中支持M3U8播放，我们需要引入一个名为`videojs5.hlsjs.js`的组件。这个组件是Video.js与HLS.js库的结合，HLS.js是一个JavaScript库，允许在不支持HLS原生的浏览器中播放M3U8视频。要使用这个组件...

			
		

	





	

		

			

				
					
video.js播放rtmp视频demo

				
			

			

				

					09-14
				

			

		

		

			
				
【video.js播放rtmp视频demo】是一个用于在Web上实现RTMP视频流播放的示例项目，它基于video.js库，这是一个广泛使用的HTML5视频播放器。通过这个demo，开发者可以学习如何集成RTMP视频流到他们的网页应用中，特别...

			
		

	





	

		

			

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

				
			

			

				

					12-09
				

			

		

		

			
				
videojs-flash使得video.js能够支持Flash播放，这对于需要Flash的流媒体服务是必要的。  5. **组件创建**：创建名为`video_player.vue`的Vue组件，其中包含`<script>`、`<template>`和`<style>`部分。`<script>`部分...

			
		

	





	

		

			

				
					
video.js在线自适应视频播放器.rar_html5 flash_html5 视频_videojs 自适应_在线 自适应 视

				
			

			

				

					07-15
				

			

		

		

			
				
自适应播放flash或html5视频，可以远程识别

			
		

	





	

		

			

				
					
基于video.js的rtmp直播流播放

				
			

			

				

					07-19
				

			

		

		

			
				
如果发生报错，可能直播地址失效了，或者自己开直播用自己的直播流，需要起一个本地服务 https://github.com/BMSVieira/moovie.js 一个 JavaScript 写的 HTML5 视频播放器，可以在网页上播放视频。特点是功能较全，...

			
		

	





	

		

			

				
					
video.js5.18.4库

				
			

			

				

					04-12
				

			

		

		

			
				
此外，videojs-contrib-hls.js插件则专门负责处理HLS流，确保HLS视频的正常播放。  四、实战应用  在实际项目中，开发者可以按照以下步骤使用video.js 5.18.4：  1. 在HTML文件中引入video5.18.4.js和videojs-...

			
		

	





	

		

			

				
					
前端实现视频在线预览插件之video.js上手

				
			

			

				

					Mr_Van的博客
				

				

					12-04
					
					6275
					
				

			

		

		

			
				
前端实现视频播放预览1、预览效果图2、预览窗口dom3、Js代码4、引入相应的js库和css布局即可进行预览了。
亲测G级视频秒播, 不考虑传输和缓存。当然视频得在服务器上

最近做了个新功能。说白了其实就是一个系统内的留言。当然留言内容包括视频留言、图片留言、信息留言、文档留言。对新提交的内容需要先进行预览和审核。然后针对附件内容进行下载。当然上传下载都是自己在做。后面有时间再来讲Java实现视频上传、转码、文件压缩、前端自定义导出word文档。

1、预览效果图
先上效果图吧，这是博主嵌套在界面里面的一

			
		

	





	

		

			

				
					
html5 video在线播放,Html 5 Video

				
			

			

				

					weixin_42509513的博客
				

				

					06-03
					
					4640
					
				

			

		

		

			
				
HOW TO USEStep 1 - Adding videoPress "Select new video" button. Browse to the embed videos in websites location of the folder you'd like to add and select video. This html 5 video tag vlc video will b...

			
		

	





	

		

			

				
					
html5 video 在线视频,HTML5 视频(Video)

				
			

			

				

					weixin_39636102的博客
				

				

					06-01
					
					5072
					
				

			

		

		

			
				
HTML5 视频(Video)为了更好的展示内容，很多站点都会使用到视频， HTML5 提供了展示视频的标准。检测您的浏览器是否支持 HTML5 视频：检测互联网上的视频一直到现在，还没有一个统一的显示视频的标准。我们看到的视频，大多数是通过插件(比如 Flash)来显示的。不是所有浏览器都拥有一样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。浏览器支持  元素列表IE...

			
		

	





	

		

			

				
					
html 在线播放器,HTML5 Web播放器-Video.js

				
			

			

				

					weixin_31739613的博客
				

				

					05-30
					
					691
					
				

			

		

		

			
				
原标题：HTML5 Web播放器-Video.jsVideo.js是一款优秀的HTML5 Web视频播放器。它同时支持 HTM5 和 Flash 视频，支持在桌面和移动设备上的视频播放，截至目前，大概有40W的站点在使用Video.js作为web播放器。获取Video.jsVideo.js支持npm和bower方式安装：NPM$ npm install--save video.jsBower$ b...

			
		

	





	

		

			

				
					
video.js播放视频

				
			

			

				

					qq_42640067的博客
				

				

					01-12
					
					5271
					
				

			

		

		

			
				
video.js播放视频1、常用播放器2、Video.js播放m3u8格式视频3、总结
1、常用播放器
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。
flash播放器
缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。
H5播放器
基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第

			
		

	





	

		

			

				
					
uniapp 使用 video.js

				
			

			

				

					02-29
				

			

		

		

			
				
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发iOS、Android、H5等多个平台的应用程序。而video.js是一个开源的HTML5视频播放器库，可以在网页上方便地嵌入和控制视频播放。

要在UniApp中使用video.js，可以按照以下步骤进行操作：

1. 在UniApp项目中安装video.js库。可以通过npm或者直接下载video.js的源码文件。

2. 在需要使用视频播放功能的页面中引入video.js库。可以在页面的`<script>`标签中使用`import`语句引入video.js库。

3. 在页面中创建一个`<video>`标签，并设置相应的属性和事件。可以通过设置`src`属性指定视频文件的路径，通过设置`controls`属性显示视频播放控制条，通过设置`poster`属性显示视频封面图等。

4. 在页面的`<script>`标签中编写相应的逻辑代码。可以通过调用video.js提供的API来控制视频的播放、暂停、音量调节等操作。

需要注意的是，UniApp是一个跨平台开发框架，而video.js是一个基于HTML5的库，所以在不同平台上可能会有一些差异和限制。在使用过程中，建议查阅UniApp和video.js的官方文档，以获取更详细的使用说明和示例代码。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值