Câu hỏi Đồng bộ hóa HTML5


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 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.

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.


14
2018-06-22 01:26


gốc


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 github.com/miohtama/slideshow9000/blob/master/slideshow/static/… - Mikko Ohtamaa


Các câu trả lời:


Mikko Ohtamaa cung cấp một giải pháp trong một bình luận, 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 các 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();

}

12
2017-07-01 21:08



Cảm ơn - đã không nhận thấy câu hỏi này vẫn còn mở bởi tôi :) - Mikko Ohtamaa


Đây là một giải pháp đơn giản sử dụng Popcorn.js lấy cảm hứng từ điều này bài báo.

$(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>


2
2018-01-20 23:56



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


Dễ dàng với một mẹo rất đơn giản;)

<video id="myvideo" controls muted loop>
    <source src="sample_video_no_sound.mp4" type="video/mp4"/>
    <audio id="myaudio">
        <source src="sound.mp3" type="audio/mpeg"/>
    </audio>
</video>

<script>
    var myvideo = document.getElementById("myvideo");
    var myaudio = document.getElementById("myaudio");

    var change_time_state = true;

    myvideo.onplay = function(){
        myaudio.play();
        if(change_time_state){
            myaudio.currentTime = myvideo.currentTime;
            change_time_state = false;
        }
    }

    myvideo.onpause = function(){
        myaudio.pause();
        change_time_state = true;
    }
</script>

1
2018-03-31 23:21





Có thể đạt được hiệu ứng tương tự 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.


0
2018-06-22 06:13



Như tôi đã nói, tôi đặc biệt cần phải tránh điều này: âm nhạc được tạo động. - Mikko Ohtamaa


Hãy 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.

http://videojs.com/


0
2018-06-23 04:16





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.


0
2017-08-26 23:58