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

最新推荐文章于 2024-05-15 12:27:46 发布

HolaSecurity

最新推荐文章于 2024-05-15 12:27:46 发布

阅读量1.1w

点赞数 3

分类专栏：『问题记录』文章标签： videojs src 无法播放

本文链接：https://blog.csdn.net/shaotaiban1097/article/details/102794564

版权

『问题记录』专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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>

HolaSecurity

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
3
评论
videoJs 在 JS 代码中动态修改 src 属性无法切换视频问题

videoJs 在 JS 代码中动态修改 src 属性，虽然 console.log 输出显示修改成功，但播放的视频并没有切换过来建议使用 videoJS 的 api 中的 src 方法进行修改<!doctype html><html> <head> <meta charset="utf-8"> <title>vi...
复制链接

扫一扫