【问题标题】:HTML 5 Video Tag not working from Tomcat (Edited)HTML 5 视频标签在 Tomcat 中不起作用(已编辑)
【发布时间】:2013-05-25 21:51:30
【问题描述】:

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

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

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

应用逻辑如下:

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

我面临的问题是我的视频没有从 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>

控制器 Servlet:

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

    }

}

welcome.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>

search.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>

video.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>

【问题讨论】:

  • &lt;source src="G:\\To-See\\Ravi_sir_joke.m4v"&gt; ,它应该替换为具有完整上下文路径的网络服务器中的某个路径。
  • tomcat 7 的 Webserver 上下文路径是什么?指导我,我会改变我的程序。
  • 将视频放在应用程序根文件夹下的某个文件夹下,并给出源路径。
  • 我不能说...这是要求。 Tomcat 将在一个驱动器中,视频将在另一个分区驱动器中。
  • 我尝试在我的 tomcat webapp 应用程序路径中创建根文件夹。仍然有效。

标签: java html jakarta-ee tomcat tomcat7


【解决方案1】:

如何检查 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>

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

      这是出于安全原因。从某些服务器加载的页面无法从本地驱动器加载文件。将视频复制到 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>
      

      【讨论】:

      • 如何解决?您能指导我并更改设置以便我可以访问吗?
      • 对不起,它不起作用。从页面源复制的渲染 HTML 是:
      • 源中的'src'属性不能是标签,它应该是一个路径。我现在在那个页面上只有页面的绝对路径。如何使用它将视频显示在屏幕上
      • 还要注意第一行。但看起来你的jsp没有被处理。刚刚以原始形式打印。
      • 我已经编辑了示例,但同样的问题仍然存在。您可以检查错误并找到解决方案。 (我已经从绝对路径变成了相对路径)
      猜你喜欢
      • 2023-03-27
      • 2020-04-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-25
      • 1970-01-01
      • 1970-01-01
      • 2021-11-27
      相关资源
      最近更新 更多