js实现简单的原生的video播放器并控制和样式

最新推荐文章于 2024-03-24 10:00:00 发布

Alicesa

最新推荐文章于 2024-03-24 10:00:00 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： javascript html css

本文链接：https://blog.csdn.net/Alicesa/article/details/108396863

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.{
				font-family: "微软雅黑";
			}
			#box{
				margin-left: 500px;
			}
			li
			{
				list-style: none;
				width: 80px;
				height: 30px;
				float: left;
				
			}
			ul
			{
				margin-left: 50px;
				
				
			}
			input{
				background-color: chartreuse;
			}
			
		</style>
	</head>
	<body>
			<div id="box">
				<section >
		
			<!--<audio controls="controls" autoplay="autoplay" loop="loop">
				<source src="media/Truth of the Legend.ogg" type="audio/ogg"></source>
			</audio>-->
			<video controls id="video" ontimeupdate="update()" onprogress="cs()"><!--autoplay loop onmousemove="this.play()" onmouseout="this.pause()"-->
				<source src="media/movie.mp4" type="video/mp4"></source>
			</video>
			<ul>
				<span id="s2"></span>
				<li><input type="button" id="pp" value="播放/暂停" onclick="playorpause()" ></li>
				
				<li><input type="button" onclick="big()" value="放大"></li>
				<li><input type="button" onclick="sx()" value="缩小"></li>
				<li><input type="button" onclick="jy()" value="静音"></li>
				<li><input type="button"  onclick="up()" value="增加音量" id="bp" ></li>
				<li><input type="button" id="bd" onclick="vd()" value="减小音量"></li>
				<li><input type="button" id="sy" onclick="yl()" value="音量"></li><br />
				<span id="result"></span><br />
				<input id="rg" type="range"min="0" max="100" value="100" onchange="getvalue()" />
				<span id="nb"></span>
				
				
				
				
			</ul>
			
		</section>
			</div>
		<script type="text/javascript">
			var v=document.getElementById("video");
			function playorpause(){
			if(v.paused){
				v.play();
				document.getElementById("pp").value="暂停";
				
			}
			else{
				v.pause();
				document.getElementById("pp").value="播放";
				
			}
		}
			function big()
			{
				v.width=1000;
				//视频大小
			}
			function jy()
			{
				if(v.muted){
					v.muted=false;
				}else{
					v.muted=true;
				}
			}
			function yl()
			{
				v.volume=0.2;
			}
			function sx()
			{
				v.width=200;
			}
			function up()
			{
				if(v.volume<1)
				{
					video.volume+=0.1;
					if(video.volume>0)
					{
						video.muted=false;
					}
				}
				volume=video.volume;
				
			}
			function vd()
			{
				
				if(v.volume>0)
				{
					video.volume-=0.1;
					if(video.volume==0)
					{
						video.muted=true;
					}
				}
				volume=video.volume;
			}
			function update()
			{
				var r=document.getElementById("result");
				var d=v.duration;
				var cur=v.currentTime;
				r.innerHTML=Math.floor(cur)+"/"+Math.floor(d)+"秒";
			}
			function getvalue()
			{
				var value=document.getElementById("rg").value;
				var nb=document.getElementById("nb");
				nb.innerHTML=value;
				video.volume=value/100;
			}
			function cs()
			{
					var video=document.getElementById("video");
				var state=video.networkState;
				var result=document.getElementById("result3");
				if(state=="0")
				{
					s2.innerHTML="媒体信息正在初始化";
				}
				else if(state=="1")
				{
					s2.innerHTML="媒体信息加载完毕，请单击播放";
				}
				else if(state=="2")
				{
					s2.innerHTML="正在加载媒体信息";
				}
				else 
				{
					s2.innerHTML="媒体加载失败";
				}
				
			}
			
			
			
		</script>
	</body>
</html>

效果（样式不是很美观）

在这里插入图片描述

但是能通过原生的js开始控制并且写入样式

Alicesa

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现简单的原生的video播放器并控制和样式

代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .{ font-family: "微软雅黑"; } #box{ margin-left: 500px; } li { list-style: none;
复制链接

扫一扫