Tôi đang theo dõi từ một nguồn, tắt tiếng và tôi muốn phát nhạc nền qua nguồn bằng phần tử. Các bản nhạc chứa một số yếu tố quan trọng thời gian.Đồng bộ hóa HTML5 <video> với <audio> phát lại
Các tùy chọn để đồng bộ hóa hai trình phát phương tiện khác nhau này trong HTML5/Javascript là gì? sẽ cung cấp cho các đồng hồ tổng thể vì nó phát lại âm thanh là rất nhạy cảm thời gian - mất khung hình video bây giờ và sau đó là không quan trọng.
Mikko Ohtamaa cung cấp một giải pháp trong một chú thích, mà tôi thực sự nghĩ là lựa chọn tốt nhất ở đây - nó không đòi hỏi một khuôn khổ, và nó không yêu cầu bạn phải chỉnh sửa tập tin video của bạn.
Về cơ bản, chỉ cần lấy thời gian hiện tại từ phần tử video khi nó được "bật tiếng" và áp dụng thời gian đó cho phần tử âm thanh. Một số mã có thể trông như thế này:
function unmute() {
var vid = document.getElementById("video");
var aud = document.getElementById("audio");
aud.currentTime = vid.currentTime;
aud.play();
}
Cảm ơn - đã không nhận thấy câu hỏi này vẫn còn mở bởi tôi :) –
Hiệu ứng tương tự có thể đạt được bằng cách đưa nhạc vào chính tệp video của bạn. Các trình điều khiển trình phát video html5 sẽ có khả năng tắt âm thanh.
Như tôi đã nói đặc biệt cần phải tránh điều này: âm nhạc được tạo động. –
Dùng thử VideoJS. Vào thời điểm phát lại video bắt đầu khi trang được tải và sẵn sàng, bạn có thể kích hoạt một chức năng sẽ bắt đầu phát nhạc được chứa trong trang riêng biệt.
Here là một giải pháp đơn giản sử dụng Popcorn.js lấy cảm hứng từ this bài viết.
$(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>Có thể đồng bộ hóa theo cả hai cách, ý tôi là thay đổi âm thanh phản ánh video và thay đổi trong video phản ánh âm thanh? – shrestha2lt8
Không có giải pháp đáng tin cậy. Tính năng html5 duy nhất hỗ trợ đồng bộ nhiều luồng là mediaGroup. Nó đã được unshipped bởi Chrome và không được chấp nhận bởi w3c.
Hiện tại tôi làm điều này bằng cách đặt video.currentTime mà tôi nhận được từ đồng hồ theo dõi âm thanh https://github.com/miohtama/slideshow9000/blob/master/slideshow/static/video.js#L48 –