温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

视频播放按比例显示

发布时间:2020-06-21 11:55:15 来源:网络 阅读:348 作者:东方部落 栏目:开发技术
<%@ 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>



不足之处,多多指导。


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI