如何正确支持带有码头的 html5 <video> 源答案

【问题标题】：How to correctly support html5 <video> sources with jetty如何正确支持带有码头的 html5 <video> 源
【发布时间】：2014-10-09 20:46:12
【问题描述】：

我的 Java/jetty 应用程序上有一个简单的 ResourceHandler，jetty 提供 2 个简单文件，一个是 html5 页面，另一个是我的 video.mp4 视频文件。

<!DOCTYPE html>
<html>
<head><title>TEST</title></head>
<body>
    <video style="width: 400px; height: 300px" src="video.mp4" autoplay="autoplay" loop="loop" preload="auto"></video>
</body>
</html>

问题是......当我第一次打开 html 页面时，视频被下载并缓存，并在第一次播放后停止播放并保持冻结状态，如果我刷新页面，循环按预期播放（永远连续播放）。

java/jetty 代码如下

ResourceHandler om = new ResourceHandler();
om.setDirectoriesListed(true);
om.setResourceBase(BASE_PATH);
handlers.setHandlers(new Handler[] { om });

问题是，任何人都知道为什么由 jetty 9.2.3 提供的 html5 视频只播放第一个循环，然后在 chrome 3.7.0 上冻结...或者提供一些指导以避免视频在首次播放后冻结通过码头？

【问题讨论】：

mp4（文件大小）有多大？（只是想测试一下）
您的意思是 chrome "37.0" 而不是 "3.7.0"？（因为那会使它成为不可能的旧版 chrome）
嗨，谢谢你关心我的问题，我的 chrome 的正确版本是 37.0.2062.124，mp4 文件大小小于 1mb（测试了 1.5mb、30mb 和 150mb 大小，总是同样的结果）

标签： java html video jetty

【解决方案1】：

这适用于Jetty 9.2.3.v20140905

package org.eclipse.jetty.demo;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLEncoder;

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

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.servlet.DefaultServlet;
import org.eclipse.jetty.servlet.ServletContextHandler;
import org.eclipse.jetty.servlet.ServletHolder;

public class VideoServerMain
{
    @SuppressWarnings("serial")
    public class IndexerServlet extends HttpServlet
    {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
        {
            resp.setContentType("text/html");

            PrintWriter out = resp.getWriter();
            out.println("<!DOCTYPE html>");
            out.println("<html><head><title>Videos</title></head>");
            out.println("<body>");
            for (File file : baseDir.listFiles())
            {
                if (file.isFile() && file.getName().endsWith(".mp4"))
                {
                    String encodedFilename = URLEncoder.encode(file.getName(), "UTF-8");
                    out.println("<video style=\"width: 400px; height: 300px\" controls loop>");
                    out.printf("  <source src=\"%s\" type=\"video/mp4\">%n",encodedFilename);
                    out.println("</video>");
                    out.printf("<p>%s</p>%n",file.getName());
                    out.println("<hr/>");
                }
            }
            out.println("</body>");
            out.println("</html>");
        }
    }

    public static void main(String[] args)
    {
        if (args.length != 1)
        {
            System.err.printf("ERROR: Usage %s [videos-dir]%n",VideoServerMain.class.getName());
            System.exit(-1);
        }

        File baseDir = new File(args[0]);
        if (!baseDir.exists() || !baseDir.isDirectory())
        {
            System.err.printf("ERROR: not a valid directory: %s%n",baseDir);
            System.exit(-1);
        }

        try
        {
            new VideoServerMain(baseDir).start();
        }
        catch (Throwable t)
        {
            t.printStackTrace(System.err);
        }
    }

    private final File baseDir;

    public VideoServerMain(File baseDir)
    {
        this.baseDir = baseDir;
    }

    public void start() throws Exception
    {
        Server server = new Server(8080);

        // Establish Scratch directory for the servlet context (used by JSP compilation)
        File tempDir = new File(System.getProperty("java.io.tmpdir"));
        File scratchDir = new File(tempDir.toString(),"embedded-jetty-html5-vide-server");

        if (!scratchDir.exists())
        {
            if (!scratchDir.mkdirs())
            {
                throw new IOException("Unable to create scratch directory: " + scratchDir);
            }
        }

        // Setup the basic application "context" for this application at "/"
        // This is also known as the handler tree (in jetty speak)
        ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
        context.setContextPath("/");
        context.setAttribute("javax.servlet.context.tempdir",scratchDir);
        context.setResourceBase(baseDir.toURI().toASCIIString());

        // Add servlet to present html for found videos
        ServletHolder holderIndexer = new ServletHolder(new IndexerServlet());
        context.addServlet(holderIndexer,"/indexer");

        // Make sure that our welcome-file is the indexer servlet
        context.setWelcomeFiles(new String[]{ "indexer" });

        // Allow static file serving of videos themselves, via DefaultServlet
        // Add Default Servlet (must be named "default")
        ServletHolder holderDefault = new ServletHolder("default",DefaultServlet.class);
        holderDefault.setInitParameter("resourceBase",baseDir.getAbsolutePath());
        holderDefault.setInitParameter("dirAllowed","true");
        holderDefault.setInitParameter("welcomeServlets","true");
        holderDefault.setInitParameter("redirectWelcome","true");

        context.addServlet(holderDefault,"/");

        server.setHandler(context);

        server.start();
        server.join();
    }
}

您似乎有 2 个问题。

ResourceHandler 对于浏览器对其提出的要求来说太简单了。

浏览器似乎做了很多部分请求，持续时间长的请求，并在需要时进行恢复。这类请求最好使用DefaultServlet
您用于视频标签的 HTML 不起作用，但是当我将其更改为以下内容时，它工作正常。

<video style="width: 400px; height: 300px" controls loop=>
  <source src="VID_20130822.mp4" type="video/mp4">
</video>

然后chrome好像又开心了。

【讨论】：

谢谢你，正如你所建议的那样，我将资源处理程序更改为 defaultservelt 并且一切正常