У меня есть трек из одного источника, без звука, и я бы хотел играть в него музыку, используя элемент. Треки содержат некоторые критические моменты времени.
Какими будут варианты синхронизации этих двух разных медиаплееров в HTML5/Javascript? будет выдавать мастер-часы, поскольку воспроизведение звука очень чувствительно к времени - время от времени теряется видеокадр.
Mikko Ohtamaa предоставил решение в комментарии, которое, на мой взгляд, является лучшим вариантом здесь - он не требует фреймворка, и он не требует редактирования ваших видеофайлов.
По существу, просто захватите текущее время с видеоэлемента, когда оно "отключено", и примените это время к элементу аудио. Некоторый код может выглядеть так:
function unmute() {
var vid = document.getElementById("video");
var aud = document.getElementById("audio");
aud.currentTime = vid.currentTime;
aud.play();
}
Здесь - это простое решение с использованием Popcorn.js, вдохновленного this.
$(function(){
var medias = {
audio: Popcorn("#narration"),
video: Popcorn("#video")
},
loadCount = 0,
events = "play pause timeupdate seeking volumechange".split(/\s+/g);
// iterate both media sources
Popcorn.forEach(medias, function(media, type) {
// when each is ready...
media.on("canplayall", function() {
// trigger a custom "sync" event
this.emit("sync");
// Listen for the custom sync event...
}).on("sync", function() {
// Once both items are loaded, sync events
if (++loadCount == 2) {
// Uncomment this line to silence the video
//medias.video.mute();
// Iterate all events and trigger them on the video
// whenever they occur on the audio
events.forEach(function(event) {
medias.video.on(event, function() {
// Avoid overkill events, trigger timeupdate manually
if (event === "timeupdate") {
if (!this.media.paused) {
return;
}
medias.audio.emit("timeupdate");
return;
}
if (event === "seeking") {
medias.audio.currentTime(this.currentTime());
}
if (event === "volumechange") {
if(this.muted()) {
medias.audio.mute();
} else {
medias.audio.unmute();
}
medias.audio.volume(this.volume());
}
if (event === "play" || event === "pause") {
medias.audio[event]();
}
});
});
}
});
});
}); <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script>
<audio id="narration">
<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg">
</audio>
<video id="video" controls="controls">
<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4">
</video>Тот же эффект может быть достигнут путем включения музыки в ваш видеофайл. Элементы управления видео плеером html5 будут иметь возможность отключить звук.
Попробуйте VideoJS. В то время, когда воспроизведение видео начинается, когда страница загружена и готова, вы можете вызвать функцию, которая начнет воспроизводить музыку, содержащуюся на странице отдельно.
Нет надежного решения. Единственная функция html5, поддерживающая синхронизацию нескольких потоков, - это медиагруппа. Он был отгружен Chrome и устарел от w3c.