videoJs 在 JS 代码中动态修改 src 属性无法切换视频问题

videoJs 在 JS 代码中动态修改 src 属性，虽然 console.log 输出显示修改成功，但播放的视频并没有切换过来

建议使用 videoJS 的 api 中的 src 方法进行修改

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>video5.0</title>

		<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
		<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
	</head>

	<body>
		<div class="container">
			<video id="video1" class="video-js" controls preload="auto"  width="640" height="264" poster=""
			 data-setup='{}'>
				<source src="./video/01.mp4" type='video/mp4' />
			</video>
		</div>
		<div class="container">
			<video id="video2" class="video-js" controls preload="auto"  width="640" height="264" poster=""
			 data-setup='{}'>
				<source src="./video/02.mp4" type='video/mp4' />
			</video>
		</div>
		<div class="container">
			<video id="video3" class="video-js" controls preload="auto"  width="640" height="264" poster=""
			 data-setup='{}'>
				<source src="./video/03.mp4" type='video/mp4' />
			</video>
		</div>

		<input type="button" value="click here" id="replay">

		<script type="text/javascript">
			$(function() {

			})

			// $('#replay').click(function() {
			// 	videojs("video1").src("./video/02.mp4");
			// })

			$('#replay').click(function() {
				//这里只所以取外围 div 做循环，是因为直接取 video 标签或者 source 标签，由于视频加载的问题，偶尔会存在取不到节点问题
				$('.container').each(function(index, item) {
					var id = $(item).find('video')[0].id;
					console.log(id);
					//有三个示例视频，这里随机生成 1/2/3 拼接视频地址
					var newSrc = './video/0' + (~~(Math.random() * 3) + 1) + '.mp4';
					console.log(newSrc);
					videojs(id).src(newSrc)
				})
			})
		</script>

	</body>
</html>

videoJs 在 JS 代码中动态修改 src 属性无法切换视频问题

悦读