Невозможно воспроизвести видео с использованием HTML Mediasource
У меня есть сервер с kcinit.mp4, kc1.m4s, kc2.m4s, kc3.m4s ... до kc54.m4s. У меня есть сервлет Java для ответа на запросы GET к этим файлам. Я пытаюсь реализовать потоковую передачу. Тем не менее, я не могу воспроизвести эти файлы в формате 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
Сервлет:
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 говорит, что поддерживается, и элемент видео просто загружается навсегда):
1 ответ
Я прошу прощения за этот вопрос. Я сделал несколько небрежных ошибок. С сервлетом все в порядке. Ошибка из-за 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>