video.js 实现视频,图片列表

最新推荐文章于 2024-06-04 09:39:18 发布
最新推荐文章于 2024-06-04 09:39:18 发布
阅读量3k 收藏 1
点赞数
分类专栏： 成长历程 文章标签： video.js

最近有需求要做一个资料上传的页面，资料包含图片，视频，办公文档等，其他都好做，视频因为和jeesite框架冲突，最后找了的的Video.js来做，先说一下坑吧

如图1所示，开始视频老是播放不出来，最后发现因为自己吧AVI后缀直接改成MP4所以播放不出来，用原装MP4就可以了，其他直接按照案列来就好了，下载地址： HTTP：// www.jq22.com/jquery-info404

2出来样式


<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<link href="${ctxStatic}/video.js/css/video-js.min.css" rel="stylesheet">
<!-- 	 <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> -->

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<%--   	<script src="${ctxStatic}/video.js/ie8/videojs-ie8.min.js"></script> --%>
	
<!-- 	<script>videojs.options.flash.swf = "${ctxStatic}/video.js/js/video-js.swf";</script> -->
	<title>活动管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(z);
			$("#searchForm").submit();
        	return false;
        }
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><input id="btnCancel" class="btn" type="button" value="返 回" οnclick="history.go(-1)"/></li>
	</ul><br/>
	<form:form id="searchForm" modelAttribute="hgRlzyActivity" action="${ctx}/activity/hgRlzyActivity/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
	</form:form>
	<sys:message content="${message}"/>
<table width='100%' border='0' cellspacing='0' cellpadding='5'>  
	<tr align='center'>  
		<c:forEach var="photo" items="${page.list}" varStatus="status">  
			<c:choose>  
				<c:when test="${status.count % 4 == 0}">  
					<td width='25%'>  
						<table border=1 align=center cellpadding=3 cellspacing=1 bordercolor="#666666" bgcolor='#ffffff' class='bk1'>  
							<tr>  
								<td align="center"> 
								<c:choose>
									<c:when test="${fn:contains(photo.name,'.pdf')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/pdf.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.docx')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/word.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.pptx')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/ppt.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.mp4')}">
<%-- 									<a href="${photo.path}" οnclick="sum('${photo.id}')" download="${photo.name}" width=150 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/shipin.jpg"  width=150 height=113 border='0' align="middle"> </a> --%>
									<video οnended="a('${photo.id}1')" id="${photo.id}1" class="video-js" controls preload="auto" width="200" height="200" data-setup="{}">
<%-- 									  poster="${ctxStatic}/country/shipin.jpg"  --%>
										<source src="${photo.path}" type="video/mp4">
										<p class="vjs-no-js">
										  To view this video please enable JavaScript, and consider upgrading to a web browser that
										  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
										</p>
									  </video>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.mp3')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/yinpin.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:otherwise>
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${photo.path}"  width=200 height=113 border='0' align="middle"> </a>  
									</c:otherwise>
								</c:choose>
								</td>  
							</tr>  
						</table><br>  
						下载:<a href="${photo.path}" download="${photo.name}" οnclick="sum('${photo.id}')" >${photo.name}</a>  <br>用户:${photo.createBy.name} | 点击：<input type="text" id="${photo.id}" disabled="true" value="${photo.browsenumber}" style="width: 20px" > 
					</td>  
					<c:out value="</tr>" escapeXml="false" />  
					<c:out value="<tr align='center'>" escapeXml="false" />  
				</c:when>  
				<c:otherwise>  
					<td width='25%'>  
					    <table border=1 align=center cellpadding=3 cellspacing=1 bordercolor="#666666" bgcolor='#ffffff' class='bk1'>  
						    <tr>  
							    <td align="center">  
							    <c:choose>
								    <c:when test="${fn:contains(photo.name,'.pdf')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/pdf.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.docx')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/word.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.pptx')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/ppt.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.mp4')}">
<%-- 									<a href="${photo.path}" οnclick="sum('${photo.id}')" download="${photo.name}" width=150 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/shipin.jpg"  width=150 height=113 border='0' align="middle"> </a> --%>
									<video οnended="a('${photo.id}1')"  id="${photo.id}1" class="video-js" controls preload="auto"  width="200" height="200" data-setup="{}">
<%-- 									  poster="${ctxStatic}/country/shipin.jpg"  --%>
										<source src="${photo.path}" type="video/mp4">
										<p class="vjs-no-js">
										  To view this video please enable JavaScript, and consider upgrading to a web browser that
										  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
										</p>
									  </video>
									</c:when>
									<c:when test="${fn:contains(photo.name,'.mp3')}">
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${ctxStatic}/country/yinpin.jpg"  width=200 height=113 border='0' align="middle"> </a>
									</c:when>
									<c:otherwise>
									<a href="${photo.path}" οnclick="sum('${photo.id}')"  width=200 height=113 border='0' align="middle" class='bk1'><img src="${photo.path}"  width=200 height=113 border='0' align="middle"> </a>  
									</c:otherwise>
								</c:choose>
							    </td>  
						    </tr>  
						</table><br>  
					下载:<a href="${photo.path}" download="${photo.name}" οnclick="sum('${photo.id}')">${photo.name}</a>  <br>用户:${photo.createBy.name} | 点击：<input type="text" id="${photo.id}" disabled="true" value="${photo.browsenumber}" style="width: 20px" >
					</td>  
				</c:otherwise>  
			</c:choose>  
		</c:forEach>  
	</tr>  
</table>  
<div class="pagination">${page}</div>
<script src="${ctxStatic}/video.js/js/video.min.js"></script>
<!-- <script src="https://vjs.zencdn.net/7.0.3/video.js"></script> -->
<script type="text/javascript">
function sum(id) {
	var a=Number($("#"+id).val())+1;
	$("#"+id).val(a);
	id=id+","+a;
	$.ajax({
		type:"post",
		async:true,
		url:"${ctx}/activity/hgRlzyActivity/upBrowse?actidataId="+id,
		dataType:"json",
		success: function(data) {
		},
		error: function(data) {
		}
	})
}
//视频点击事件,视频结束点击量+1
function a(id) {
		var id1=id.substring(0,id.length-1);
		sum(id1);
}
</script>
</body>
</html>

慢爬小毛虫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
videojs-playlist 视频列表播放_videojs列表
09-19
videojs-playlist 视频列表播放
基于videojs实现带有播放列表播放页面
热门推荐
梅川酷紫
09-27 1万+
基于videojs实现带有播放列表播放页面videojs播放器的CSS样式修改视频暂停不显示播放按钮中间播放按钮变圆形播放列表实现1、引入插件2、增加播放列表html3、增加js代码效果图 videojs播放器的CSS样式修改 videojs原生的样式有些比较不符合个人习惯，就做了部分修改。 视频暂停不显示播放按钮 增加一个css样式即可： .vjs-paused .vjs-big-play-bu...
JS实现H5 Video视频某帧作为封面图
最新发布
i_am_xiaobai的博客
06-04 295
【代码】JS实现H5 Video视频某帧作为封面图。
利用videojs实现视频列表循环播放，自动播放下一个
MyNameIsXiaoLai的博客
01-25 5645
https://blog.csdn.net/kenhins/article/details/82625100 版权声明：本文为博主原创文章，未经博主允许不得转载。    https://blog.csdn.net/u010363836/article/details/82625100 &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt;   &lt;he...
videojs-playlist:videojs的播放列表插件
05-06
videojs播放列表 在video.js中启用播放列表的插件 维护状态：稳定 安装 通过npm安装videojs-playlist（首选）： $ npm install videojs-playlist 或凉亭： $ bower install videojs-playlist 包容性 使用您选择的工具在您的网站上包含videojs-playlist。 夹杂物的最简单的方法是[removed]所述的Video.js后标签[removed]标记： < script src =" path/to/video.js/dist/video.js " > </ script > < script src =" path/to/videojs-playlist/dist/videojs-playlist.js " > </ script > 通过npm安装时，videojs-playlis
视频列表html页面,vue + video.js实现视频列表页（多个视频）
weixin_36059856的博客
06-04 3424
vue + video.js实现视频列表页vue项目中做一个视频列表页，本来用原生video标签来实现，由于考虑到手机浏览器兼容问题，找了很多插件，最后决定用video.js这个插件来实现。Video.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器安装video.js$ npm install video.js在...
videojs.zip
05-20
"videojs.zip"这个压缩包中包含了实现m3u8播放的相关JavaScript插件，为开发者提供了一套完整的解决方案。本文将深入探讨m3u8播放技术以及video.js库在其中的作用。 首先，m3u8是一种基于文本的播放列表格式，用于...
video js' 的最新版本
06-07
"video.js" 是一个流行的开源JavaScript库，专为在网页上嵌入和操作HTML5视频而设计。...总的来说，video.js是前端开发中实现高质量视频播放体验的重要工具，它提供了丰富的功能和高度的可定制性。
vue-video-player.zip
09-09
Vue-video-player是一个基于video.js的前端视频播放组件，专为Vue.js框架设计。这个组件将video.js的强大功能与Vue的灵活性相结合，使得在Vue项目中处理视频内容变得更加简单。Video.js是一个广泛使用的开源HTML5和...
基于video弹窗视频播放代码.zip
07-11
使用jQuery video在线视频播放功能。div图片列表鼠标悬停显示视频播放按钮，点击弹窗方式打开mp4视频播放效果代码。默认我们需要配置ipath的视频路径。这是一款简洁好用的弹窗视频播放。
videojs最新版6.2.7
08-26
《videojs 6.2.7：视频播放器的核心组件》 videojs 是一款流行的开源JavaScript库，专门用于构建响应式、自定义化的HTML5视频播放器。版本6.2.7是videojs的一个重要里程碑，它在稳定性和功能上都达到了较高的水平，...
实现简易html视频播放器的方法
12-08
本文介绍了实现简易html视频播放器的方法，分享给大家，具体如下： 文件列表 root@tianshl:/data/video# ls hch.mp4 test.mp4 xyx.mp4 index.html video.list jquery.js index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> body{ text-align: cente
VideoSite:Videosite - 使用 Bigvideo.js 在背景中播放带有侧边栏播放列表的视频的网页
06-28
视频网站 Videosite - 使用 Bigvideo.js 在侧边栏播放列表中在后台播放视频的网页。 带动画侧边栏的全屏背景视频网站 这是 BigVideo.js 播放列表在网站上的简单实现。 有一个侧边栏，它在页面加载时动画并包含视频播放列表。 单击视频链接后，将在后台播放视频。 它包含用于浏览器回退支持的多格式视频列表。 除了 BigVideo.js 的正常功能外，还有一个自动隐藏脚本，当您停止移动鼠标时（除非您在播放列表导航上），该脚本会使内容淡出。 还使用 Modernizr 的触摸功能检测规则来实现 BigVideo 对于可能不允许自动播放的触摸屏设备的行为。
videojs 实现视频列表 点击播放下个视频功能
10-31
videojs实现视频列表 点击播放下个视频功能
酷播(极酷)跨平台多终端网页播放器 v4.0.zip
07-14
酷播(极酷)跨平台多终端网页播放器简介 酷播V4.0版跨平台网页视频播放器（完全免费/支持右键自定义），开放支持播放器右键自定义功能，用户可以自己定义右键信息及链接；开放支持自定义播放器控制条形象LOGO及链接；开放以上两项核心功能后，酷播V4.0产品将是一款完全免费的产品。 酷播跨平台多终端网页播放器特色功能说明： 1、支持流媒体RTMP协议、RTMPT协议、RTMPE协议( 全面支持SRS,red5,crtmp,FMS等流媒体的点播与直播 )，同时支持普通HTTP协议；(New) 2、支持6种广告功能：前置广告 / 视频广告 / 暂停广告 / 角标广告 / 后置广告 / 滚动文字广
js从video中截图并下载
crazy_victor的博客
11-29 6985
function savePic(fileName) { var fileType = &quot;png&quot;; // 如果文件名中没有带后缀，默认使用png switch (fileName) { // 判断保存的图片格式 case fileName.indexOf(&quot;png&quot;) &amp;gt; -1: fileType = &quot;png&quot;; break; case
html5实现视频列表js代码,JavaScript实现html5视频播放器列表
weixin_31083901的博客
06-08 2186
本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器(重点放在视频的顺序播放，列表切换上，并不重新定义控制条)。一、插入视频如果不加上controls属性将不会显示控制条二、HTML结构播放列表进球瞬间胜利庆祝进球瞬间胜利庆祝进球瞬间胜利庆祝 < > 三、js部分1. 首先获取或定义一些需要用到的变量var video = document.getElementB...
vue+video.js实现视频播放列表
tq1711的博客
09-24 3869
{{i+1}}、{{item.title}} <!-- <div v-else class="flex flex_between mt10" style="flex-wrap:wrap; width:900px;" > <d...
video.js实现播放列表
08-01
要在video.js中实现播放列表，你可以按照以下步骤进行操作： 1. 首先，确保你已经引入了video.js库到你的项目中。你可以通过在HTML文件中添加以下代码来引入video.js： ```html <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.min.js"></script> ``` 2. 创建一个包含视频播放器的HTML元素。例如，你可以在HTML文件中添加以下代码来创建一个video标签： ```html <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"></video> ``` 3. 初始化video.js播放器。你可以在JavaScript文件中添加以下代码： ```javascript var myPlayer = videojs('my-video'); ``` 4. 创建一个包含视频源和标题的播放列表数组。例如，你可以在JavaScript文件中添加以下代码： ```javascript var playlist = [ { src: 'video1.mp4', title: 'Video 1' }, { src: 'video2.mp4', title: 'Video 2' }, // 添加更多的视频... ]; ``` 5. 添加逻辑来切换播放列表中的视频。你可以在JavaScript文件中添加以下代码： ```javascript var currentVideoIndex = 0; function playNextVideo() { currentVideoIndex = (currentVideoIndex + 1) % playlist.length; var video = playlist[currentVideoIndex]; myPlayer.src(video.src); myPlayer.poster(''); // 如果你有自定义的封面图片，可以在这里设置 myPlayer.play(); } myPlayer.on('ended', playNextVideo); ``` 6. 最后，调用`playNextVideo()`函数来开始播放第一个视频： ```javascript playNextVideo(); ``` 通过按照上述步骤，你就可以在video.js中实现一个简单的播放列表了。记得根据你的需求修改视频源和标题，以及自定义播放器的样式。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值