用javascript制作可选择播放及自动循环播放的网页视频播放器

最新推荐文章于 2024-04-18 09:59:38 发布

Chris Brown

最新推荐文章于 2024-04-18 09:59:38 发布

阅读量2.2k

点赞数 3

分类专栏：前端新手 javascript 文章标签： js 前端新手

本文链接：https://blog.csdn.net/qq_43616237/article/details/96208998

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

新手

6 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

用javascript制作网页视频播放器

html5已经实现了标签实现网页播放多媒体文件的效果，但是当播放源不止一个，这个时候就需要进行播放列表的创建并且依次播放内容了。
然而，用javascript应该如何实现呢？
首先前端代码比较简单，大致设置样式和布局即可。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.video{
				width:90%;
				position: relative;
				left: 3%;
			
			}
			.bd{
				width: 90%;
				position: absolute;
				background-color: bisque;
				border: solid darkslategray;
			}
			body{
				text-align: center;
				position: absolute;
				left: 7.5%;
				width: 90%;
			}
			.list{
				position: relative;
				padding: 5px;
				left: 10%;
			}
			li{
				width: 80%;
				list-style: none;
				padding: 5px;
				cursor: pointer;
				background: cornflowerblue;
				border-bottom: solid white;
			}
			.current{
				width: 85%;
				color: crimson;
				background-color: aquamarine;
				position: relative;
				right: 2.5%;
			}
		</style>
	</head>
	<body>
		<div class="bd">
		<div><h1>在线视频播放器</h1></div>
		<div class="video">
			<video controls="controls" autoplay="autoplay" src="video/1.webm" class="video">
		</div>
		<div class="list">
			<ul>
				<li href="source/1.webm" id='1' class="current" onclick="clp()">视频1</li>
				<li href="source/2.webm" id="2" onclick="clp()">视频2</li>
				<li href="source/3.webm" id="3" onclick="clp()">视频3</li>
			</ul>
		</div>
		</div>
		
	</body>
	</html>

在网页视频播放器的功能实现过程中，具体思路如下：
将媒体文件以列表或者数组的方式来进行访问，通过不同列表项的属性刷新来完成一个比较连贯的效果。
我们可以定义一个数组dataSets用以存放媒体文件名，还可以创建一个数组vlist用来存放列表项。
同时通过定义不同标签的class值从而确定当前播放的文件，然后通过src的定义来对文件进行定位。
代码如下：

<script type="text/javascript">
		//auto loop play
		var vid = document.querySelector('video');
		var vlist = document.querySelectorAll('li'); //生成数组
		var dataSets = new Array('1.webm', '2.webm', '3.webm');
		var curr = 0;
		vlist[curr].innerHTML = '正在播放' + dataSets[curr];
		vid.addEventListener("ended", function() {
			play();
		});

		function play() {
			vlist[2].innerHTML = '视频3';
			if(curr + 1 <= 2) {
				curr++;
				vlist[curr - 1].className = '';
				vlist[curr].className = 'current'
				vid.src = 'video/' + dataSets[curr];
				vlist[curr - 1].innerHTML = '视频' + curr;
				vlist[curr].innerHTML = '正在播放' + dataSets[curr];
				vid.play();
			} else {
				curr = 0;
				vlist[curr + 2].className = '';
				vlist[curr].className = 'current';
				vid.src = 'video/' + dataSets[curr];
				vlist[curr].innerHTML = '正在播放' + dataSets[curr];
				vid.play();
			}
		}
		//click play
		function clp() {
			var past = document.querySelector('.current');
			past.className = '';
			event.currentTarget.className = 'current';
			vid.src = event.currentTarget.href;
			var vi1 = document.getElementById("1");
			var vi2 = document.getElementById("2");
			var vi3 = document.getElementById("3");
			vi1.innerHTML = '视频1';
			vi2.innerHTML = '视频2';
			vi3.innerHTML = '视频3';
			event.currentTarget.innerHTML = '正在播放' + event.currentTarget.id + '.webm';
			vid.src = 'video/' + event.currentTarget.id + '.webm';
		}
	</script>

界面的效果：
在这里插入图片描述

Chris Brown

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
用javascript制作可选择播放及自动循环播放的网页视频播放器

用javascript制作网页视频播放器html5已经实现了标签实现网页播放多媒体文件的效果，但是当播放源不止一个，这个时候就需要进行播放列表的创建并且依次播放内容了。然而，用javascript应该如何实现呢？首先前端代码比较简单，大致设置样式和布局即可。代码如下：<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫