0
我有一臺服務器，包含kcinit.mp4，kc1.m4s，kc2.m4s，kc3.m4s ...直到kc54.m4s。我有一個Java Servlet來響應對這些文件的GET請求。我正在嘗試實現流媒體。但是，我無法使用Mediasource在HTML上播放這些文件。無法使用HTML播放視頻Mediasource
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表示支持和視頻元素只是用來加載永遠）：
