首页 » IT技术 » 正文

详解如何使用JavaScript按顺序或随机播放多个视频

2022-10-16 IT技术 3624 views

用html5播放一个视频文件相当容易，但是否可以按顺序或随机播放多个视频？

如果用JavaScript获取“ HTMLMediaElement ”的“ loadeddata ”和“ end ”事件，就可以得到视频文件的“ 播放”和“播放完成” ，从而可以控制多个视频。

html示例代码

我们先准备好html。示例代码如下所示。 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>示例</title>
</head>
<body>
	<section>
		<video id="hero-movie" muted>
			<source type="video/mp4" id="hero-movie-mp4">
		</video>
	</section>
</body>
</html>

详解如何使用JavaScript按顺序或随机播放多个视频

JavaScript示例代码

接下来是 JavaScript 示例代码。 

// 视频列表
var play_item = 
[
	'movie_01',
	'movie_02',
	'movie_03'
];

// 数组洗牌
play_item = shuffle(play_item);

// 初始化设置
var play_num = 0;
var play_movie;
var movie = document.getElementById("hero-movie");

// 设置初始一个显示
play_movie = play_item[play_num];

// 视频播放
moviePlay();

// 视频播放 
function moviePlay()
{
	// 将视频添加到video中
	document.getElementById('hero-movie-mp4').setAttribute('src', 'mov/' + play_movie + '.mp4');
	movie.load();

	// 开始播放
	movie.addEventListener("loadeddata", function()
	{
		movie.play();
	}, false);

	// 播放结束
	movie.addEventListener("ended", function()
	{
		nextSetting();
	}, false);
}

// 准备下一个视频播放
function nextSetting()
{
	if(play_num >= play_item.length - 1)
	{
		play_num = 0;
	} else {
		play_num++;
	}

	// 下一个视频
	play_movie = play_item[play_num];

	// 视频播放
	moviePlay();
}

// 数组洗牌
function shuffle(array)
{
	var n = array.length, t, i;
	while (n)
	{
		i = Math.floor(Math.random() * n--);
		t = array[n];
		array[n] = array[i];
		array[i] = t;
	}
	return array;
}

第2行：

存储视频文件的文件名的数组。

第10行：

我们在这里随机打乱视频文件名数组，所以如果您不想随机播放，请将其注释掉。

第27和37行：

这里“ getElementById ”指定 DOM 元素，“ setAttribute ”覆盖 src 属性。

第31-34行：

获取视频加载事件并播放视频。

第37-40行：

获取视频播放结束事件并准备加载下一个视频。

本文来源：词雅网

本文地址：https://www.ciyawang.com/js-video-files.html

本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。

相关推荐

最近发表

标签列表

热门文章

搜索
返回顶部