Mam utwór z jednego źródła, wyciszenie i chcę odtwarzać muzykę w tle za pomocą elementu. Ścieżki zawierają elementy krytyczne.Synchronizowanie HTML5 <video> z odtwarzaniem <audio>
Jakie byłyby opcje synchronizacji tych dwóch różnych odtwarzaczy multimedialnych w HTML5/Javascript? dałoby zegar główny, ponieważ odtwarzanie dźwięku jest bardzo czasochłonne - utrata ramek wideo od czasu do czasu nie jest krytyczna.
Mikko Ohtamaa warunkiem rozwiązania w komentarzu, który ja faktycznie zdaniem jest najlepszym rozwiązaniem tutaj - nie wymaga ramy, a to nie wymaga edycji plików wideo.
Zasadniczo, po prostu pobierz bieżący czas z elementu wideo, gdy jest "nieważny", i zastosuj ten czas do elementu audio. Niektóre kod może wyglądać następująco:
function unmute() {
var vid = document.getElementById("video");
var aud = document.getElementById("audio");
aud.currentTime = vid.currentTime;
aud.play();
}
Dzięki - nie zauważyłem, że to pytanie jest nadal otwarte przeze mnie :) –
Ten sam efekt można osiągnąć, dołączając muzykę do pliku wideo. Kontrolki odtwarzacza wideo HTML5 będą mogły wyciszyć dźwięk.
Jak już powiedziałem konkretnie trzeba tego uniknąć: muzyka jest tworzona dynamicznie. –
Wypróbuj VideoJS. W momencie, gdy odtwarzanie wideo rozpoczyna się po załadowaniu i przygotowaniu strony, można uruchomić funkcję, która rozpocznie odtwarzanie muzyki zawartej na tej stronie osobno.
Here to proste rozwiązanie za pomocą Popcorn.js inspirowane this artykułu.
$(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") {
\t if(this.muted()) {
\t \t medias.audio.mute();
\t } else {
\t \t medias.audio.unmute();
\t }
\t
\t medias.audio.volume(this.volume());
}
if (event === "play" || event === "pause") {
medias.audio[event]();
}
});
});
}
});
});
});\t <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
\t <script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script>
<audio id="narration">
\t <source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg">
</audio>
<video id="video" controls="controls">
\t <source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4">
</video>Czy możliwa jest synchronizacja w obie strony, tzn. Zmiana w odbiorze audio na wideo i zmiana w odbiorze wideo na dźwięk? – shrestha2lt8
Nie ma niezawodne rozwiązanie. Jedyną funkcją html5, która obsługuje synchronizację wielu strumieni, jest grupa medialna. Został wyzwolony przez Chrome i przestarzały przez w3c.
Obecnie robię to przez ustawienie video.currentTime, które otrzymuję z zegara ścieżki dźwiękowej https://github.com/miohtama/slideshow9000/blob/master/slideshow/static/video.js#L48 –