个人中心
gpt4 book ai didi

javascript - 如何在 HTML 中完美同步媒体？

转载 作者：行者123 更新时间：2023-12-03 02:58:42 25 4
gpt4 key购买 nike

假设我想同步两个视频并避免回声。我的意思是两个轨道应该保持同步，就像播放带有音频的常规视频文件一样。

<video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls=""></video><br>
<p>Current Time:<span id="aTime"></span></p><br>
<video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls=""></video><br>
<p>Current Time:<span id="bTime"></span></p><br>
<button onclick="playM()">Play</button>
<button onclick="pauseM()">Pause</button>
<script>
var a = document.getElementById("A");
var b = document.getElementById("B");
function playM() {
a.play();
b.play();
}
function pauseM() {
a.pause();
b.pause();
}
a.ontimeupdate = function() {
document.getElementById("aTime").innerHTML = a.currentTime;
};
b.ontimeupdate = function() {
document.getElementById("bTime").innerHTML = b.currentTime;
};
a.onseeked = function() {
b.currentTime= a.currentTime;
};
b.onseeked = function() {
a.currentTime = b.currentTime;
};
</script>

最佳答案

更新

经过一些实验，我发现仅仅微秒的偏移量就很好，但对于同步视频来说并不是必需的。在演示 2 中，我们有视频标签 A 和 B。A 有 4 个 eventListener() 和视频 B 作为回调。 play()、pause() 和 seek 在 A 和 B 之间同步，其中 A 是“主”，B 是“从” .

演示 2

<!DOCTYPE html>
<html>

<head>
  <style>
    html {
      font: 400 16px/1.5 Consolas
    }
    
    section {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: calc(100% - 160px);
    }
    
    button {
      padding: 0;
      border: 0;
    }
  </style>
</head>

<body>
  <section>
    <video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='240' height='135'></video>
    <video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='240' height='135'></video>
  </section>


  <script>
    var A = document.getElementById("A");
    var B = document.getElementById("B");


    A.addEventListener("play", function() {
      B.play();
    });

    A.addEventListener("pause", function() {
      B.pause();
    });

    A.addEventListener("seeking", function() {
      B.currentTime = A.currentTime;
    });

    A.addEventListener("seeked", function() {
      B.currentTime = A.currentTime;
    });
  </script>
</body>

</html>

<小时/>JavaScript 是同步的，这意味着它一次处理一件事。可以通过使用允许异步操作的 Promise 来同步媒体，但它的语法不直观且非常困难。幸运的是， async 和 await 几个月前才在所有主要浏览器*中发布。 Promise 的所有行为和流程都在 await 中。以下是异步使用 2 个函数所涉及的基本语法: 

async function functionName() {
  var A = await functionA();
  var B = await functionB();
  var C = A + B;
  return C;
}

<小时/> 详情在Demo中注释

引用文献位于帖子底部

演示

/* For details on how this demo controls the <form>, 
|| see HTMLFormControlsCollection in References
*/
var x = document.forms.ui.elements;
var playM = x.playM;
var pauseM = x.pauseM;

/* Register the buttons to the click event
|| callback is asyncCall()
|| Register a video tag to the ended event
|| callback is just an anonymous function to
|| display 'IDLE' message when the videos have ended
*/
/* Avoid the use of on event handlers, use event
|| listeners instead. For details on Event Listeners
|| see addEventListener() in References
*/
playM.addEventListener('click', asyncCall, false);

pauseM.addEventListener('click', asyncCall, false);

document.querySelector('video').addEventListener('ended', function(e) {
  x.display.value = 'IDLE';
}, false);

/* This callback is an Async Function which uses a key
|| word called "await". await waits for a function
|| to start then moves on to the next await to 
|| see when it's ready to start. The players are 
|| playing asynchronously (i.e. congruently, i.e i.e. in 
|| parallel). Normally JavaScript is synchronous because
|| the evaluation and execution of a function is the
|| only thing a browser would do, so everything else
|| had to wait their turn. That is called: "blocking".
|| While await is waiting, the browser is allowed to do
|| other processing. For details on async and await,
|| see References.
*/
async function asyncCall(e) {
  var A = document.getElementById("A");
  var B = document.getElementById("B");
  var status;
  
  /* if/if else condition to determin which button was
  || actually clicked. Use e.target to get the origin
  || of event (i.e. clicked button). For details on
  || Event.target, see References
  */
  // if the button's #id is 'playM'...
  if (e.target.id === 'playM') {
    var mediaA = await mPlay(A);
    x.outA.value = performance.now(mediaA);
    var mediaB = await mPlay(B);
    x.outB.value = performance.now(mediaB);
    status = mPlay(B);
    
  // otherwise if the button's #id is 'pauseM'... 
  } else if (e.target.id === 'pauseM') {
    var mediaA = await mIdle(A);
    x.outA.value = performance.now(mediaA);
    var mediaB = await mIdle(B);
    x.outB.value = performance.now(mediaB);
    status = mIdle(B);
  } else {
    status = 'IDLE';
  }
  x.display.value = status;
  return status;
}

// Simple function used in asyncCall() to play
function mPlay(ele) {
  var state = 'PLAYING';
  ele.play();
  return state;
}

// Simple function used in asyncCall() to pause
function mIdle(ele) {
  var state = 'IDLE';
  ele.pause();
  return state;
}
html {
  font: 400 16px/1.5 Consolas
}

section {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: calc(100% - 160px);
}

button {
  padding: 0;
  border: 0;
}

#playM:before {
  content: '▶';
  font-size: 32px
}

#pauseM::before {
  content: '⏸';
  font-size: 32px;
}
<section>
  <video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='160' height='90'></video>
  <video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='160' height='90'></video>
</section>

<form id='ui'>
  <fieldset>
    <legend>Asynchronous Playback</legend>

    <button id='playM' type='button'></button>

    <button id='pauseM' type='button'></button>

    <output id='display'></output><br><br>

    <label for='outA'>Source A: </label>
    <output id='outA'></output><br><br>

    <label for='outB'>Source B: </label>
    <output id='outB'></output><br><br>

  </fieldset>
</form>

引用文献

关于javascript - 如何在 HTML 中完美同步媒体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47507221/

25 4 0
文章推荐： javascript - AngularJS 显示元素 onScroll 函数
文章推荐： azure - 从 Azure 门户中测试 Web 聊天时，新机器人 channel 注册收到 403 禁止
文章推荐： Azure 证书颁发状态
文章推荐： javascript - 我输入 future 时间戳时的日期无效
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com