0
에 표시하지만, 파이어 폭스에서 잘 작동하지 않습니다.조각난 MP4 크롬
구글 크롬 버전 : 61.0.3163.100 (공식 빌드) (64 비트)
모질라 파이어 폭스 버전 : 56.0.2 (64 비트)
조각난 MP4가 이상 스트림 내 비디오 웹 소켓 A와 client html 페이지에서 MSE로 가져옵니다. 비디오 코덱은 H264 Main Profile입니다. 비디오 정보는 FFPROBE 및 다른 검사관에서 검사하여 데이터 무결성을 확인합니다. FMP4를 멀티플렉싱 할 때 다음과 같은 플래그가 사용된다 : 나는 또한 이중 첫 번째 조각은 24 바이트 크기의 소위 "초기화 부분"이라고 확인
"empty_moov+default_base_moof+frag_keyframe"
. 내가 말했듯이, 파이어 폭스 재생 괜찮습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MSE Demo</title>
</head>
<body>
<h1>MSE Demo</h1>
<div>
<video id="video1" controls width="80%" autoplay="true"> </video>
</div>
<script type="text/javascript">
(function() {
var mime = 'video/mp4; codecs="avc1.4D401E"';
if (!MediaSource.isTypeSupported(mime)) {
document.querySelector('h1').append(' - Unsuported mime type :(');
return;
}
var buffer;
var websocket;
var buffer_size = 4 * 1024 * 1024;
var buffer_index = 0;
var frag_mp4_buffer = new Uint8Array(buffer_size);
var video = document.querySelector('video');
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceended', function (e) { console.log('sourceended: ' + mediaSource.readyState); });
mediaSource.addEventListener('sourceclose', function (e) { console.log('sourceclose: ' + mediaSource.readyState); });
mediaSource.addEventListener('error', function (e) { console.log('error: ' + mediaSource.readyState); });
video.src = window.URL.createObjectURL(mediaSource);
video.crossOrigin = 'anonymous';
mediaSource.addEventListener('sourceopen', function (e) {
console.log('sourceopen: ' + mediaSource.readyState);
//doesn't help:
// var playPromise = video.play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
/*
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function (error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
*/
buffer = mediaSource.addSourceBuffer(mime);
buffer.addEventListener('updateend', function (e) {
if (video.duration && !video.currentTime) {
video.currentTime = video.duration;
}
});
var websocket = new WebSocket('ws://' + document.location.hostname + ':8080');
websocket.binaryType = 'arraybuffer';
websocket.addEventListener('message', function (e) {
var data = new Uint8Array(e.data);
console.log("got packet! size:" + data.length);
if (data.length) {
if ((buffer_index + data.length) <= buffer_size) {
frag_mp4_buffer.set(data, buffer_index);
buffer_index = buffer_index + data.length;
if (!buffer.updating && mediaSource.readyState == 'open')
{
var appended = frag_mp4_buffer.slice(0, buffer_index);
buffer.appendBuffer(appended);
frag_mp4_buffer.fill(0);
buffer_index = 0;
}
}
}
}, false);
}, false);
})();
</script>
</body>
또 다른 중요한 정보를, 당신은 내가 video.play() 전화에서 주석 볼 수 있습니다 여기에
발견했기 때문에 나는 here에서 다음과 같은 솔루션을 시도로드하지 못했습니다 즉 실제로 응용 프로그램 시작 오류가 발생 유일한 장소 :catch되지 않은 예외 : DOMException : 더 지원 소스가
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function (error) {
// Automatic playback failed.
$(document).on('click', '#video1', function (e) {
var video = $(this).get(0);
if (video.paused === false) {
video.pause();
} else {
video.play();
}
return false;
});
});
}
하지만 아무 것도 변경되지 않았습니다. 비디오 영역은 항상 흰색입니다.