问题描述
我有一个mp4文件sample.mp4。我使用mp4box将其转换为片段,然后使用how to create a mpd file using MP4Box进行mpd 现在,我的代码来自此source。 创建片段后,将在浏览器中播放视频。但是没有音频。
形成的文件如下:
我在这里有两个查询。
首先,如何在MSE(媒体源扩展)中使用JavaScript将音频添加到此视频中?视频正在静音播放。
第二,新格式文件的名称为sample_dash_track1_init.mp4和sample_dash_track2_init.mp4。当视频播放第一个文件及其片段时,第二个文件及其片段的用途是什么?
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MSE Demo</title>
</head>
<body>
<h1>MSE Demo</h1>
<div>
<video controls width="80%" ></video>
</div>
<script type="text/javascript">
(function() {
var baseUrl = 'http://beta.insidesoftwares.com/development/video/sam/';
var initUrl = baseUrl + 'sample_dash_track1_init.mp4';
var templateUrl = baseUrl + 'sample_dash_track1_$Number$.m4s';
var sourceBuffer;
var index = 1;
var numberOfChunks = 13;
var video = document.querySelector('video');
if (!window.MediaSource) {
console.error('No Media Source API available');
return;
}
var ms = new MediaSource();
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen',onMediaSourceOpen);
function onMediaSourceOpen() {
sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.4d401f"');
sourceBuffer.addEventListener('updateend',nextSegment);
GET(initUrl,appendToBuffer);
video.play();
}
function nextSegment() {
var url = templateUrl.replace('$Number$',index);
GET(url,appendToBuffer);
index++;
if (index > numberOfChunks) {
sourceBuffer.removeEventListener('updateend',nextSegment);
}
}
function appendToBuffer(videoChunk) {
if (videoChunk) {
sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
}
}
function GET(url,callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (xhr.status != 200) {
console.warn('Unexpected status code ' + xhr.status + ' for ' + url);
return false;
}
callback(xhr.response);
};
xhr.send();
}
})();
</script>
</body>
</html>`
解决方法
我猜想sample_dash_track1 *包含视频,sample_dash_track2 *包含音频。 因此,您的手写JavaScript播放器仅播放视频,因为sample_dash_track1 *中只有视频。
尽管我喜欢您的JavaScript播放器-您可能想看看https://github.com/Dash-Industry-Forum/dash.js?
否则,您将不得不解析mpd文件并动态重新复用,这是例如在DASH.js库中已经完成的大量工作。