java - HTML 5 视频标签在 Tomcat 中不起作用（已编辑）

Question

使用文件的绝对路径和相对路径无法从 Tomcat 7 服务器播放视频：

编辑摘要：更改了相对路径的示例，我将视频放在应用程序根文件夹中（仍然无法解决视频错误）。

我们正在构建一个用于本地使用的视频观看的小型应用程序。由于 HTML-5 为我们提供了极大的视频观看支持，我们选择使用简单的 Servlet/JSP 编写程序，将其部署在Tomcat 7 Web 服务器上。

应用逻辑如下：

根路径（绝对路径）设置为我在tomcat中的应用程序的根文件夹。
根目录中的所有文件和目录旁边都显示有一个“开始”按钮。
如果通过单击“开始”选择文件夹中的视频文件，则会出现视频查看页面。
视频文件的相对文件使用表达式语言 (EL) 提供给视频页面的源标签。
视频应该从本地主机的硬盘播放到所有浏览器端点。

我面临的问题是我的视频没有从tomcat服务器播放，但是当复制并粘贴到视频工作正常的文件时，浏览器上呈现的相同的html“源”代码。如何使它从tomcat服务器工作？

编辑后：我修改了我的应用程序以调整 tomcat myapp 根文件夹中的相对路径，但它仍然无法正常工作。以下是编辑后的问题。

我的应用程序的屏幕短裤是：

第一阶段：点击链接

第一阶段

第二阶段：选择要浏览的视频或文件夹

第二阶段

第三阶段：播放视频 （这里出现错误）

服务器在浏览器上渲染了以下 HTML（从查看源复制）：

<!doctype html>

<html>

<head>
<title>Cluster Video App</title>
<script type="text/javascript">

</script>
</head>

<body>
    <h1>Enjoy the Video</h1>

    <video controls autoplay width="512" height="288">
        <source src="G:\\To-See\\Ravi_sir_joke.m4v"> </source>
    </video>
</body>
</html>

当将相同的源复制并粘贴到计算机中任何位置的示例 html 页面上时，视频可以正常工作。下图证明了这一点。

预期产出

编辑后：服务器呈现包含视频的正确相对路径。视频还不行。

<!doctype html>

<html>

<head>
<title>Cluster Video App</title>
<script type="text/javascript">

</script>
</head>

<body>
    <h1>Enjoy the Video</h1>

    <video controls autoplay width="512" height="288">
        <source src="../ROOT-VIDEO/Ravi_sir_joke.m4v" > </source>
    </video>
</body>
</html>

该视频位于我的应用程序的根目录中：

我已将编辑后的程序粘贴在此页面中以供参考。请纠正我并帮助我清除视频错误。

程序

封装结构：

封装结构

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" 
        xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <!-- Welcome page -->
    <!-- <welcome-file-list>
        <welcome-file>/welcome.do</welcome-file>
    </welcome-file-list> -->

    <!-- JSF mapping -->
    <servlet>
        <servlet-name>Controller</servlet-name>
        <servlet-class>com.cluster.vapp.controller.ControllerServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- Map these files with JSF -->
    <servlet-mapping>
        <servlet-name>Controller</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>


</web-app>

控制器小服务程序：

   package com.cluster.vapp.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.cluster.vapp.fileutils.FileUtil;
import com.cluster.vapp.fileutils.SearchResult;
import com.cluster.vapp.service.VappService;
import com.cluster.vapp.service.VappServiceImpl;

public class ControllerServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    private VappService service;

    public void init() throws ServletException {

        service = new VappServiceImpl();
    }

    protected void service(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");

        // HttpSession session = request.getSession();
        String strServletPath = request.getServletPath();

        // debug
        System.out.println(strServletPath);
        // end of debug
        int intServletpath = 0;

        if (strServletPath.equalsIgnoreCase("/welcome.do")) {

            intServletpath = 1;

        }

        if (strServletPath.equalsIgnoreCase("/verify.do")) {

            intServletpath = 2;

        }

        if (strServletPath.equalsIgnoreCase("/searchRoot.do")) {

            intServletpath = 3;

        }

        switch (intServletpath) {

        case 1: {// welcome.do

            RequestDispatcher requestDispatcher = request
                    .getRequestDispatcher("./JSP/welcome.jsp");
            requestDispatcher.forward(request, response);

            break;
        }

        case 2: { // verify.do

            if (service.isVideoFile(request.getParameter("path_name"))) {

                String strVideoPath = service.findRelative(request
                        .getParameter("path_name"));
                request.setAttribute("VIDEO_PATH", FileUtil.adjustPathName(strVideoPath));
                RequestDispatcher requestDispatcher = request
                        .getRequestDispatcher("./JSP/video.jsp");
                requestDispatcher.forward(request, response);
            }

            else {

                List<SearchResult> listSearchResults = service
                        .searchDirectory(request.getParameter("path_name"));
                request.setAttribute("LIST_SEARCH_RESULT", listSearchResults);
                RequestDispatcher requestDispatcher = request
                        .getRequestDispatcher("./JSP/search.jsp");
                requestDispatcher.forward(request, response);
            }

            break;
        }

        case 3: {// searchRoot.do

            List<SearchResult> listSearchResults = service
                    .searchRootDirectory();
            request.setAttribute("LIST_SEARCH_RESULT", listSearchResults);

            RequestDispatcher requestDispatcher = request
                    .getRequestDispatcher("./JSP/search.jsp");
            requestDispatcher.forward(request, response);
            break;
        }

        }
    }
}

VappServiceImpl.java

package com.cluster.vapp.service;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import com.cluster.vapp.fileutils.FileUtil;
import com.cluster.vapp.fileutils.SearchResult;

public class VappServiceImpl implements VappService{

    public static final String ROOT_PATH = "F:\\apache-tomcat-7.0.33\\webapps\\balaji\\ROOT-VIDEO";
    public static final String BASE_PATH = "F:\\apache-tomcat-7.0.33\\webapps\\balaji";

    public List<SearchResult> searchRootDirectory() {

        List<String> listDirectoryNames = FileUtil.fetchFileNames(ROOT_PATH);

        List<SearchResult> listSearchResults = new ArrayList<SearchResult>();

        for (String dirName : listDirectoryNames) {
            SearchResult result = new SearchResult();
            result.setStrName(dirName);
            result.setStrPath(ROOT_PATH + "\\" + dirName);
            listSearchResults.add(result);
        }

        return listSearchResults;
    }

    public boolean isVideoFile(String pStrPath) {

        File file = new File(pStrPath);

        // System.out.println("Is file There: " + file.exists());

        if (file.isFile())
            return true;
        else
            return false;
    }

    public List<SearchResult> searchDirectory(String pStrPath) {

        List<String> listDirectoryNames = FileUtil.fetchFileNames(pStrPath);

        List<SearchResult> listSearchResults = new ArrayList<SearchResult>();

        for (String dirName : listDirectoryNames) {
            SearchResult result = new SearchResult();
            result.setStrName(dirName);
            result.setStrPath(pStrPath + "\\" + dirName);
            listSearchResults.add(result);
        }

        return listSearchResults;
    }

    public String findRelative(String pStrVideoPath){

        return FileUtil.findRelativePath(BASE_PATH, pStrVideoPath);
    }

}

FileUtil.java

package com.cluster.vapp.fileutils;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import com.cluster.vapp.fileutils.exceptions.InvalidAbsolutePathException;
import com.cluster.vapp.fileutils.exceptions.InvalidDirectoryNameException;

/**
 * @author Balaji.K.R
 * 
 * @version 1.0
 * 
 *          The class Contains methods for various file operations. All methods
 *          present will accept only absolute string path of the source and
 *          destination file structure.
 * 
 */
public class FileUtil {

    /**
     * The Method returns the names of the files as a list, in the path given.
     * 
     * Note: The path name should be a absolute path, and should be a existing
     * directory. Any violation will lead to corresponding run-time exception.
     * 
     * 
     * @param pStrDirectory
     *            Location of the directory where it needs to be searched.
     * @return List of file names as string existing in the directory.
     */
    public static List<String> fetchFileNames(String pStrDirectory) {
        List<String> listFileNames = new ArrayList<String>();

        File directory = new File(pStrDirectory);

        if (directory.isAbsolute() == false) {
            throw new InvalidAbsolutePathException(
                    "Directory Path is not Absolute");
        }

        if ((directory.exists() && directory.isDirectory()) == false) {
            throw new InvalidDirectoryNameException();
        }

        String[] strFileNames = directory.list();

        for (String name : strFileNames) {

            listFileNames.add(name);
        }

        return listFileNames;
    }

    public static String adjustPathName(String pStrPath) {

        StringBuilder sb = new StringBuilder(pStrPath);
        sb.insert(0, "../");

        return sb.toString();

    }

    public static String findRelativePath(String pStrBasePath,
            String pStrAbsolutePath) {

        return new File(pStrBasePath).toURI()
                .relativize(new File(pStrAbsolutePath).toURI()).getPath();

    }

}

欢迎.jsp

<!DOCTYPE html>

<html>

<head>
<title>Cluster Video App</title>
</head>

<body>
    <h1>Cluster Video Application</h1>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <h1><a href="./searchRoot.do">Browse Videos</a></h1>

    </form>
</body>
</html>

搜索.jsp

<!DOCTYPE html>

<%@page isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="jstl"%>

<html>

<head>
<title>Cluster Video App</title>
<script type="text/javascript"> function submitForm(form){form.submit();} </script>
<style type="text/css"> div.label{font-size: 30px; color: blue; margin: 10px;} </style>
</head>

<body>
    <h1>Click to proceed...</h1>

    <jstl:forEach var="result"
                items="${requestScope.LIST_SEARCH_RESULT}">

    <form action="./verify.do" method="post">
        <div class="label">
            ${result.strName} <input type="button" value="Go" onclick="submitForm(this.form);"/>
            <input type="hidden" name="path_name" value="${result.strPath}">
        </div>
    </form>


    </jstl:forEach>
</body>
</html>

视频.jsp

<!doctype html>

<html>

<head>
<title>Cluster Video App</title>
<script type="text/javascript">

</script>
</head>

<body>
    <h1>Enjoy the Video</h1>

    <video controls autoplay width="512" height="288">
        <source src="${requestScope.VIDEO_PATH}"> </source>
    </video>
</body>
</html>

score 3 · Accepted Answer

那是出于安全原因。从某些服务器加载的页面无法从本地驱动器加载文件。将视频复制到 src/main/webapp/video.m4v。将 JSP 更改为：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>

<html>

<head>
<title>Cluster Video App</title>
<script type="text/javascript">

</script>
</head>

<body>
    <h1>Enjoy the Video</h1>

    <video controls autoplay width="512" height="288">
        <source src="<c:url value="/video.m4v" />"> </source>
    </video>
</body>
</html>

score 0 · Accepted Answer

如何检查 video.js 它确实有效。我用 Apache-Tomcat 8.5 进行了测试。

首先，包括这两行

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>

并使用这样的视频标签。

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4#t=5,10" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <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>

score 0 · Accepted Answer

将文件夹放在您的WebContent文件夹或webapps文件夹中，然后给出类似 ./folder1/file.mp4的路径，如果WebContent不存在，然后使用带有DynamicWebProject的 eclipse 创建一个新的项目设置，将游览文件粘贴到其中。

我也遇到了这个问题，但现在它[已解决] 我正在使用tomcat 8 和 java 7

java - HTML 5 视频标签在 Tomcat 中不起作用（已编辑）

3 回答 3

Related

Reference