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

时间:2014-09-29 13:47:14

标签: java html5 video jetty

我的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上冻结......或者提供一些指导以避免在首次播放后服务时冻结视频乘坐码头?

1 个答案:

答案 0 :(得分:0)

这适用于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();
    }
}

您似乎有两个问题。

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

    浏览器似乎会在需要时执行大量部分请求,持续时间长的请求和恢复。这类请求最好使用DefaultServlet

  2. 完成
  3. 您用于视频代码的HTML无效,但当我将其更改为以下内容时,它运行正常。

  4. <video style="width: 400px; height: 300px" controls loop=>
      <source src="VID_20130822.mp4" type="video/mp4">
    </video>
    
    然后,铬似乎又开心了。