Question

我的服务器有kcinit.mp4，kc1.m4s，kc2.m4s，kc3.m4s ...直到kc54.m4s。我有一个java servlet来响应对这个文件的GET请求。我正在尝试实现流媒体。但是，我无法使用Mediasource在html上播放这些文件。

http://localhost:8080/Virtual_Cinema2/Page - 访问HTML页面

http://localhost:8080/Virtual_Cinema2/kc?type=init - 获取kcinit.mp4

http://localhost:8080/Virtual_Cinema2/kc?type=vid&count=1 - 获取kc1.m4s

servlet：

package vc.servlets;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/kc")
public class Thozha extends HttpServlet {
    private static final long serialVersionUID = 1L;

        public Thozha() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String type = request.getParameter("type") ;
        StringBuffer sb = new StringBuffer() ;
        OutputStream os = response.getOutputStream() ;
        byte [] buffer = new byte[4096] ;
        int length ;
        if(type.equals("vid")) {
            System.out.println("vid");
            String count = request.getParameter("count") ;
            sb.append("D:/videos/kc") ;
            sb.append(count) ;
            sb.append(".m4s") ;
            File file = new File(sb.toString()) ;
            if(file.exists()) {
                FileInputStream fis = new FileInputStream(file) ;
                response.setStatus(HttpServletResponse.SC_OK);
                response.setContentType("video/mp4") ;
                response.setContentLengthLong(file.length());
                while((length = fis.read(buffer)) > 0) {
                    os.write(buffer, 0, length) ;
                }
                os.flush() ;
                fis.close() ;
            }
        }
        else if(type.equals("init")) {
            System.out.println("init");
            File file = new File("D:/videos/kcinit.mp4") ;
            if(file.exists()) {
                FileInputStream fis = new FileInputStream(file) ;
                response.setStatus(HttpServletResponse.SC_OK);
                response.setContentType("video/mp4") ;
                response.setContentLengthLong(file.length());
                while((length = fis.read(buffer)) > 0) {
                    os.write(buffer, 0, length) ;
                }
                os.flush() ;
                fis.close() ;
            }
        }
        else {
            response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        }
    }

}

Html页面：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="p">Hello</p>
<video id="video" height="300" width="300" controls>  
  Video element is not supported in your browser
</video>
<script> 
    var count = 1 ;
    var p = document.getElementById('p');
    var video = document.getElementById('video'); 
    var mediaSource ;
    var sourceBuffer ;
    if (window.MediaSource) {
    mediaSource = new MediaSource();
    video.src = window.URL.createObjectURL(mediaSource);
    p.innerHTML = "supported" ;
    mediaSource.addEventListener('sourceopen',init(e), false) ;
    } 
    else {
    p.innerHTML = "not supported" ;
    }
    function init(e) {
       var xhr = new XMLHttpRequest(); // Set up xhr request
       xhr.open("GET", "/kc?type=init", true); // Open the request  
       xhr.send();
       xhr.responseType = 'arraybuffer';
       xhr.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
              sourceBuffer.appendBuffer(new Uint8Array(xhr.response));
              p.innerHTML = "request successful" ; 
              sourceBuffer.addEventListener("updateend",update(), false);
           }
      };
    }
    function update() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/kc?type=vid&count="+count, true); // Open the request  
        xhr.send();
        xhr.responseType = 'arraybuffer';
        xhr.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
             sourceBuffer.appendBuffer(new Uint8Array(xhr.response));
               if(count == 1) { //if first segment play video
                 video.play() ; 
               }
             count++ ;
           }
        };
   }
</script>
</body>
</html>

我正在使用Microsoft Edge测试该页面。我得到了这个（p表示支持，视频元素只是永远加载）：

Answer 1

我很抱歉提出这个问题。我犯了一些粗心的错误。 servlet没什么问题。错误是因为HTML页面。

html页面的新代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="p">Hello</p>
<video id="video" height="300" width="300" controls>  
  Video element is not supported in your browser
</video>
<script> 
    var count = 1 ;
    var p = document.getElementById('p');
    var video = document.getElementById('video'); 
    var mediaSource ;
    var sourceBuffer ;
    if (window.MediaSource && MediaSource.isTypeSupported("video/mp4")) {
    mediaSource = new MediaSource();
    video.src = window.URL.createObjectURL(mediaSource);
    p.innerHTML = "1" ;
    mediaSource.addEventListener('sourceopen',init, false) ;
    } 
    else {
    p.innerHTML = "not supported" ;
    }
    function init(e) {
       p.innerHTML = "2" ;
       sourceBuffer = mediaSource.addSourceBuffer("video/mp4");
       var xhr = new XMLHttpRequest(); // Set up xhr request
       xhr.open("GET", "kc?type=init", true); // Open the request  
       xhr.send();
       xhr.responseType = 'arraybuffer';
       xhr.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
              sourceBuffer.appendBuffer(new Uint8Array(xhr.response));
              p.innerHTML = "request successful" ; 
              sourceBuffer.addEventListener("updateend",update, false);
           }
      };
    }
    function update() {
        p.innerHTML = "3" ;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "kc?type=vid&count="+count, true); // Open the request  
        xhr.send();
        xhr.responseType = 'arraybuffer';
        xhr.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
             sourceBuffer.appendBuffer(new Uint8Array(xhr.response));
               if(count == 1) { //if first segment play video
                 video.play() ; 
               }
             count++ ;
           }
        };
   }
</script>
</body>
</html>

无法使用html Mediasource播放视频

1 个答案: