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

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


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


<html>
	<head>
		<meta charset="utf-8">
		<title>video5.0title>
		<link href="css/video-js.min.css" rel="stylesheet">

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
		<script src="js/video.min.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,src,无法播放)