我正在浏览器窗口中进行视频播放，并从后端数据服务器检索视频源和音频源。开始播放时以及暂停并再次启动时，播放正常且同步。我遇到的问题是将控件拖回到视频上时。它不会自动返回到特定帧。有没有办法在 JavaScript 中控制它？
另一个问题是视频控制决定音频的播放。这意味着如果您播放视频，音频就会开始，但反之则不然。只是寻找有关如何处理此类问题的建议。
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);
}
});
}<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>最佳答案
您可以尝试在 audio 和 video 元素上监听 timeupdate 事件，该事件会在 currentTime 时更新code> 更改可能会使同步更容易。我还没有尝试过，但它可能会有所帮助。
关于javascript同步音频和视频html5控件暂停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48577837/