Question

我正在浏览器窗口中处理视频播放，并从后端数据服务器检索视频源和音频源。播放工作并在开始播放时同步，如果暂停并再次启动播放。我遇到的问题是在视频上拖回控件。它不会自动返回到特定帧。有没有办法在javascript中控制它？

另一个问题是视频控制决定了音频的播放。这意味着如果你播放视频音频开始但反之亦然。只是寻找有关如何处理这类问题的建议。

＆＃13;

var vid = document.getElementById("wVideo");
var aud = document.getElementById("wAudio");
var playbackURL = "not yet set";
var selectedID;
var selectedType;

vid.onplay = function() {

  try {
    aud.play();
  } catch (e) {
    console.log("Error on PlaySelectedCall: " + e.message + ".(punt)");
  }
}

vid.onpause = function() {
  try {
    aud.pause();
  } catch (err) {
    console.log("Error on pause: " + err.message);
  }
}

vid.onseeking = function() {

  if (vid.currentTime == 0) {
    aud.currentTime = 0;
    aud.pause();
  }
}


function exportVideo() {
  var exportScreenURL = "/myplayer/exportSaveCall.action?type=screen";
  var frame = document.getElementById("playScreenFrameII");
  frame.src = exportScreenURL;
}

function playScreen() {
  var playScreenForm = document.getElementById('playScreenForm');
  playScreenForm.action = "/myplayer/exportSaveCall.action?type=screen";
  document.getElementById('callID').value = getSelectedID();
  playScreenForm.submit();
  hide();
}

function showButtonOnStart() {
  var x = document.getElementById('buttonLink');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.visibility = 'hidden';
  }
}

function getAudioTicket() {

  showButtonOnStart();
  selectedID = getSelectedID();
  console.log("selectedID is " + selectedID);
  if (selectedID == null) {
    return;
  }
  $.ajax({
      url: "/myplayer/getAudio.action",
      type: "GET",
      data: {
        ID: selectedID
      },
      success: function(result, status, responseText) {
        var data = $.parseJSON(result);
        try {
          playbackURL = data.playbackURL;
          if (playbackURL != null) {
            console.log("Audio url is " + playbackURL);
            aud.setAttribute("src", playbackURL);
            aud.preload = "auto";

          } else {
            console.log("No audio found for this");
            aud.style.visibility = "hidden";
          }
        } catch (err) {

          writeAjaxError("setupTicketedPlaybackURL()", err.message);
        }

      },
      error: function(request, textStatus, errorThrown) {
        writeAjaxError("ScreenplayerWMP  
          setupTicketedPlaybackURL()
          ",errorThrown);
        }
      });


  }

＆＃13;

<body style="width:100%; height:100%; background:buttonface;" bottommargin="0" id="body" language="javascript" onload="getAudio();" leftmargin="0" rightmargin="0" topmargin="0">
  <!-- Media Player -->
  <div>
    <center>
      <video width="100%" height="90%" id="wVideo" controls controlsList="nodownload" preload="auto" autoplay>
			<source src="${playbackURL}" type="video/webm">
			Your browser does not support the video tag.
	</video>

      <audio controls id="wAudio" controls controlsList="nodownload 
      noremoteplayback" preload="auto" autoplay>
		<source src="" type="audio/wav" >
		Your browser does not support the audio element.
	</audio>
    </center>
  </div>

＆＃13;

Answer 1

您可以尝试在timeupdate和audio元素上收听video事件，这些元素会在currentTime更改时更新，这可能会使同步变得更容易。我没有尝试过，但它可能有所帮助。

javascript synch audio＆amp;视频html5控件暂停

1 个答案: