0
私はkcinit.mp4、kc1.m4s、kc2.m4s、kc3.m4s ... kc54.m4sまでのサーバを持っています。このファイルへのGETリクエストに応答するjavaサーブレットがあります。私はストリーミングを実装しようとしています。しかし、これらのファイルをMediasourceを使用してhtmlで再生することはできません。html Mediaiasourceを使用してビデオを再生できません
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を取得
サーブレット：
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は言うがサポートされており、ビデオ要素だけで永遠にロードする）これを取得：
