<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./videojs/css/vjs.zencdn.net_8.5.2_video-js.css">
<script src="./videojs/js/video.min.js"></script>
<style>
.videobox {
position: relative;
}
#my-video {
width: 1200px;
max-height: 500px;
}
#myAudio {
position: absolute;
left: 0;
z-index: -1;
}
.video-js .vjs-tech {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="videobox">
<video id="myVideo" class="video-js vjs-default-skin" controls width="500px" height="350px">
<source src="./mp3/test.mp4">
</video>
<!-- autoplay -->
<audio id="myAudio" controls src="./mp3/A1 (USB PnP Sound Device)output.wav"></audio>
</div>
<script>
var player = videojs('myVideo', {
preload: 'auto'
});
var audio = document.getElementById('myAudio');
var audioTrackList = player.audioTracks();
// 获取视频中所有的音轨
player.ready(function () {
var currentTime = 0;
// 当播放器开始播放时
player.on('play', function () {
console.log('Video is playing...');
audio.currentTime = currentTime;
audio.play();
});
// 当播放器暂停时
player.on('pause', function () {
console.log('Video is paused...');
audio.pause();// 音频暂停
});
// 当播放器播放结束时
player.on('ended', function () {
console.log('Video has ended...');
audio.ended();// 音频结束
});
// 当播放器的播放头到达特定时间点时
player.on('seeked', function () {
console.log('Seek operation completed...');
audio.currentTime = currentTime;
audio.play();
});
// 当播放器的播放头发生变化时
player.on('timeupdate', function () {
currentTime = player.currentTime(); // 获取当前播放时间(秒)
console.log('当前播放时间: ' + currentTime + '秒');
});
var tracks = player.audioTracks();
const usersAudioTrackList = [{
id: '1',
kind: 'translation',
label: '轨道1',
language: 'kannada',
url: './mp3/01.mp3',
},
{
id: '2',
kind: 'translation',
label: '轨道2',
language: 'kannada',
url: './mp3/02.mp3',
},
];
usersAudioTrackList.forEach(track => {
player.audioTracks().addTrack(
new videojs.AudioTrack(track) // Create a track object.
);
});
// 监听音轨变化事件
tracks.addEventListener('change', function (e) {
for (let index = 0; index < tracks.length; index++) {
const element = tracks[index];
if (element.enabled) {
var id = element.id;
var findex = usersAudioTrackList.findIndex(item => item.id == element.id);
if (findex != -1) {
var url = usersAudioTrackList[findex].url;
audio.src = url;
if (player.paused()) { // 视频暂停中 则不播放音频
audio.currentTime = currentTime;
audio.pause();
} else {
audio.currentTime = currentTime;
audio.play(); // 播放音频
}
}
// 启动
return false
}
}
});
});
function playBtn() {
player.play();
audio.play();
}
</script>
</body>
</html>
效果
也可以点击此处下载:https://download.csdn.net/download/weixin_42199383/89380814