Question

如何在JSP中用视频标签替换图像标签？我试图在与图像相同位置的一系列图像之后以1秒的时间间隔显示视频。

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>

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);
}

Answer 1

您可以在显示视频时隐藏图像标记：

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);
}

或者真正'替换'图片标签，如下所示：

将图像包装在具有唯一ID的div中，例如'wrapper'，然后将vid-tag放在你的函数中：

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);
}

在现实生活中，你当然会把它分成几个函数/对象。在你的函数中使用html不是一个很好的方法。

如何在jsp中用视频标签替换图像标签

1 个答案: