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

最新推荐文章于 2024-08-08 08:27:10 发布
最新推荐文章于 2024-08-08 08:27:10 发布
阅读量5.8k 收藏 3
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzy99/article/details/70740435
版权
本文介绍了如何利用开源的video.js插件在HTML5环境下实现在线播放视频。通过下载并引入video.js和video-js.min.css资源文件，结合简单的使用方法，设置source的src为服务器上视频的相对地址，通过控制器方法返回视频流。在遇到页面初始化问题导致方法未调用的情况下，最终采用jQuery动态赋值HTML代码的方式成功实现了在线播放功能。
摘要由CSDN通过智能技术生成

  因为在此次项目中需要实现在线播放视频的效果. 所以上网百度了一下相关的插件, 最后决定选用基于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青峰
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
视频播放插件(video.js)

				
			

			

				

					qq_38005650的博客
				

				

					06-14
					
					1359
					
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
视频播放插件Video.js

				
			

			

				

					weixin_30500105的博客
				

				

					02-16
					
					310
					
				

			

		

		

			
				
http://www.jq22.com/jquery-info404

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

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					07-15
				

			

		

		

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

			
		

	





	

		

			

				
					
Video.js 播放器使用教程

					
最新发布

				
			

			

				

					gitblog_00643的博客
				

				

					08-08
					
					681
					
				

			

		

		

			
				
Video.js 播放器使用教程
 videojs-player@videojs player component for @vuejs(3) and React.项目地址:https://gitcode.com/gh_mirrors/vi/videojs-player 项目介绍
Video.js 是一个为 HTML5 世界从头构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及其他播...

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					renyuhost的博客
				

				

					03-27
					
					488
					
				

			

		

		

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

			
		

	





	

		

			

				
					
在线视频播放

				
			

			

				

					吝啬言语的博客
				

				

					03-12
					
					1302
					
				

			

		

		

			
				
最近项目中用到了在线播放视频的功能，总结一下。基本思路是，服务端取出文件字节流，输出到前端， 网页用video标签播放。1、前端video标签，src指定请求的url和文件名：&lt;video style="width: 800px;height: 600px;" controls preload&gt;
     &lt;source src="url?vpath=文件服务端路径"&gt;&l...

			
		

	





	

		

			

				
					
使用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
					
					3071
					
				

			

		

		

			
				
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.js 播放m3u8视频

				
			

			

				

					01-22
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					12-09
				

			

		

		

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

			
		

	





	

		

			

				
					
video-js Flah在线播放器

				
			

			

				

					04-07
				

			

		

		

			
				
video-js Flah在线播放器

			
		

	





	

		

			

				
					
videojs播放rtmp视频

				
			

			

				

					11-22
				

			

		

		

			
				
使用video.js播放rtmp视频，亲测可用，注意一定要把代码放到服务器上运行！

			
		

	





	

		

			

				
					
video插件实现视频在线播放

				
			

			

				

					12-20
				

			

		

		

			
				
不支持ie8

			
		

	





	

		

			

				
					
videojs播放rtmp流，测试代码，完整版

				
			

			

				

					01-05
				

			

		

		

			
				
之前的资源自动加分到了50分，大部分小哥都下载不了，现在重新上传一份videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html，原来的连接http://download.csdn.net/download/cmqwan/9983862。
有问题可以看这篇https://blog.csdn.net/cmqwan/article/details/76059703，然后给我留言哈

			
		

	





	

		

			

				
					
videojs播放rtmp流，测试代码

				
			

			

				

					09-18
				

			

		

		

			
				
videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。

			
		

	





	

		

			

				
					
video.js播放rtmp视频demo

				
			

			

				

					09-14
				

			

		

		

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

			
		

	





	

		

			

				
					
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
					
					6384
					
				

			

		

		

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

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

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

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值