如何在jsp中用视频标签替换图像标签
[英]How to replace an image tag with an video tag in jsp
问题描述
How do i replace an image tag with an video tag in JSP? 
如何在JSP中用视频标签替换图像标签？ I am trying to display an video after series of images on the same position as image with an time interval 1 sec. 我试图在一系列图像之后的1秒时间间隔内，在与图像相同的位置上显示视频。
The JSP code is below: JSP代码如下：
<%--
Document : index
Created on : Apr 22, 2015, 8:33:41 PM
Author : Your Name <Vj>
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cat clicker</title>
<script lang="JavaScript" src="changeImage.js"></script>
</head>
<body onload="changeImage();">
<img id="img1" style="position: absolute;top :35; LEFT:170px; WIDTH:500px; HEIGHT:250px" src="image/image.jpg" alt=""/>
<video id="vid1" style="position: absolute;top :35; LEFT:170px; WIDTH:500px; HEIGHT:250px" width="819" height="460">
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
The javascript function is below: javascript函数如下：
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
function changeImage()
{
setTimeout(function(){ document.getElementById("img1").src="image/cat 1.jpg";},1000);
setTimeout(function (){ document.getElementById("img1").src="image/cat 2.jpg";},2000);
setTimeout(function (){ document.getElementById("img1").src="";},3000);
setTimeout(function () {document.getElementById("vid1").src = "image/VID1.mp4";
document.getElementById("vid1").play();}, 3000);
}
1 个解决方案
解决方案1
0 已采纳 2015-04-26 10:26:14
You could eighter hide the image-tag when showing the video: 在显示视频时，您可以隐藏图像标签：
function changeImage()
{
setTimeout(function(){ document.getElementById("img1").src="image/cat 1.jpg";},1000);
setTimeout(function (){ document.getElementById("img1").src="image/cat 2.jpg";},2000);
setTimeout(function (){ document.getElementById("img1").src="";},3000);
setTimeout(function () {document.getElementById("vid1").src = "image/VID1.mp4";
document.getElementById("img1").style.display = 'none';
document.getElementById("vid1").style.display = 'block';
document.getElementById("vid1").play();}, 3000);
}
or really 'replace' the image-tag as follows: 或真正地“替换”图像标签，如下所示：
wrap the image in a div with a unique ID like 'wrapper', then put the vid-tag inside of that in your function: 将图像包装在具有唯一ID（例如“包装器”）的div中，然后将vid标签放入函数中：
function changeImage()
{
setTimeout(function(){ document.getElementById("img1").src="image/cat 1.jpg";},1000);
setTimeout(function () {document.getElementById("vid1").src = "image/VID1.mp4";
document.getElementById("wrapper").innerHTML = "<video id=\"vid1\" ....</video>";
document.getElementById("vid1").play();}, 3000);
}
In real life you would of course split that into several functions/Objects. 在现实生活中，您当然会将其拆分为几个功能/对象。 Having the html in your function is not a nice way to do. 在函数中使用html不是一个好方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.