<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <% // 获取视频播放名称 String src = request.getParameter("name"); String name = "video\\"+src; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>视频查看</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> *{margin: 0px;padding: 0px;} /* 视频样式 用来控制视频全屏铺满显示 */ .vid-wrapper{ width:100%; position:relative; padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/ height: 0; } .vid-wrapper video{ position: absolute; top:0; left: 0; width: 100%; height: 100% background-size: cover; overflow: hidden; } </style> </head> <body> <div class="vid-wrapper"> <video class="video" id="vs" onclick="ps()" controls preload controls="controls" autoplay="autoplay"> <source src="<%=name %>"></source> </video> </div> <script type="text/javascript"> /* 单击暂停和播放视频 进来播放设置 i =1 如果进来是暂停播放状态,设置i =0 */ var i = 1; function ps(){ var vs = document.getElementById("vs"); if(i){ // 暂停视频 vs.pause(); i--; }else{ // 播放视频 vs.play(); i++; } } </script> </body> </html> 不足之处,多多指导。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。