HTML5制作简单视频播放器

最新推荐文章于 2024-06-20 20:19:27 发布
最新推荐文章于 2024-06-20 20:19:27 发布
阅读量5.5k 收藏 48
点赞数 10
文章标签： js css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39163732/article/details/104893864
版权

1.主页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>视频播放器</title>
		<link rel="stylesheet" type="text/css" href="css/23-1.css"/>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/23.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<h3 class="playerTitle">视频播放器</h3>
	<div class="player">
		<video src="MP4/Houndmouth-Sedona(高清).mp4"></video>
		<div id="controls" class="controls">
			<!--播放/暂停按钮-->
			<a href="javascript:;" class="switch fa fa-play"></a>
			<!--最大化按钮-->
			<a href="javascript:;" class="expand fa fa-expand"></a>
			<!--进度条哦-->
			<div class="progress">
				<!--响应事件-->
				<div class="bar"></div>
				<!--已加载-->
				<div class="loaded"></div>
				<div class="elapse"></div>
			</div>
			<div class="time">
				<span class="currentTiime">00:00:00</span>
				\
				<span class="totalTime">00:00:00</span>
			</div>
		</div>
	</div>
	</body>
</html>

2.CSS

body{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑",helvetica,simhei,simsun,sans-serif;
	background-color: #F7F7F7;
}
a{
	text-decoration: none;
}
.playerTitle{
	width: 100%;
	margin: 0 auto;
	line-height: 100px;
	font-size: 40px;
	text-align: center;
}
.player{
	width: 720px;
	height: 360px;
	margin: 0 auto;
	background: url(../img/23.gif) center no-repeat;
	background-size: cover;
	position: relative;
}
video{
	height: 100%;
	margin: 0 auto;
	display: none;
}
.controls{
	width: 720px;
	height: 40px;
	position: absolute;
	left: 0px;
	bottom: -40px;
	background-color: #000;
}
.controls > .switch{
	width: 20px;
	height: 20px;
	display: block;
	font-size: 20px;
	color: #fff;
	position: absolute;
	left: 10px;
	top: 10px;
}
.controls > .expand{
	width: 20px;
	height: 20px;
	display: block;
	font-size: 20px;
	color: #fff;
	position: absolute;
	right: 10px;
	top: 10px;
}
.controls > .progress{
	width: 430px;
	height: 10px;
	position: absolute;
	left: 40px;
	bottom: 15px;
	background-color: #555;
}
.controls > .progress > .bar{
	width: 100%;
	height: 100%;
	background-color: #999;
	border-radius: 3px;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	/*设置透明度为0*/
	opacity: 0;
	/*设置优先级*/
	z-index: 999;
}
.controls > .progress > .loaded{
	width: 60%;
	height: 100%;
	background-color: #999;
	border-radius: 3px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
.controls > .progress > .elapse{
	width: 0%;
	height: 100%;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
}
.controls > .time{
	height: 20px;
	position: absolute;
	left: 490px;
	top: 10px;
	color: #fff;
	font-size: 14px;
}

3.JS

/*通过jq来实现功能*/
$(function(){
	/*1.获取播放器*/
	var video=$("video")[0];
	
	/*2.实现播放与暂停*/
	$(".switch").click(function(){
		/*实现播放与暂停的切换，如果是暂停 >> 播放 ，如果是播放 >> 暂停*/
		if(video.paused){
			video.play();
			/*移除暂停样式，添加播放样式*/
		}
		else{
			video.pause();
			/*移除播放样式，添加暂停样式*/
		}
		/*设置标签的样式*/
		/*toggleClass:在两个样式之间做切换
		 * fa-play:播放
		 * fa-pause:暂停
		 * */
		$(this).toggleClass("fa-play fa-pause");
	});
	
	/*3.实现全屏操作*/
	$(".expand").click(function(){
		/*全屏处理，不同浏览器需要添加不同前缀 >> 能力测试*/
		if(video.requestFullscreen){
			video.requestFullscreen();
		}
		else if(video.webkitRequestFullScreen){
			video.webkitRequestFullScreen();
		}
		else if(video.msRequestFullscreen){
			video.msRequestFullscreen();
		}
		else if(video.mozRequestFullScreen){
			video.mozRequestFullScreen();
		}
	});
	
	/*4.实现播放业务逻辑：当视频文件可以播放时触发下面的事件（start）*/
	video.oncanplay=function(){
		/*由于是本地文件，视频一下子就加载出来，所以看不到过程，添加一个延时显示即可*/
		setTimeout(function(){
			/*1.将视频文件设置为显示,加载图消失*/
			video.style.display="block";
			$(".player").css("background","black");
			/*2.获取当前视频文件的总时长,duration*/
			var total=video.duration; /*00:04:23*/
			/*console.log(total);*/
			/*3.计算时分秒 60*60=3600
			 * 3700:3700/3600
			 * 3700:3700%3600 >> 100/60
			 * Math.floor():显示整数
			 * */
			/*console.log(Math.floor(3700/3600));*/
			/*补0操作：时分秒都是两位，当不足两位时需要补0*/
			/*var hour=Math.floor(total/3600);
			hour=hour<10?"0"+hour:hour;
			var minute=Math.floor(total%3600/60);
			minute=minute<10?"0"+minute:minute;
			var second=Math.floor(total%60);
			second=second<10?"0"+second:second;*/
			var result=getResult(total);
			/*测试结果*/
			/*console.log(hour+":"+minute+":"+second);*/
			
			/*4.将计算记结果展示在指定的dom元素中*/
			$(".totalTime").html(result);
		},2000);
	}
	
	/*通过总时长计算时分秒*/
	function getResult(time){
		var hour=Math.floor(time/3600);
		hour=hour<10?"0"+hour:hour;
		var minute=Math.floor(time%3600/60);
		minute=minute<10?"0"+minute:minute;
		var second=Math.floor(time%60);
		second=second<10?"0"+second:second;
		/*返回结果*/
		return hour+":"+minute+":"+second;
	}
	
	/*5.实现播放过程中的业务逻辑，当视频播放时会触发ontimeupdate事件（进行中）
	 
	 * 如果修改currentTime值也会触发这个事件，只要currentTime值变化，就会触发此事件
	 * */
	video.ontimeupdate=function(){
		/*1.获取当前播放时间*/
		var current=video.currentTime;
		console.log(current);
		/*2.计算出时分秒,调用getResult(time)函数*/
		var result=getResult(current);
		/*3.将计算记结果展示在指定的dom元素中*/
		$(".currentTiime").html(result);
		/*4.设置当前播放进度条样式*/
		var percent=current/video.duration*100+"%"
		$(".elapse").css("width",percent);	
	};
	
	/*实现视频的跳播*/
	$(".bar").click(function(e){
		/*问题：1.如何获取当前点击位置，用偏移值ofsetX
		 * 2.点击的时候总是从头开始：Hbuilder对视频的支持不够，需要从源文件中打开
		 * */
		/*1.获取当前鼠标相对于父元素的left偏移值*/
		var offset=e.offsetX;
		/*2.计算偏移值相对于总父元素总宽度的比例*/
		var percent=offset/$(this).width();
		/*3.计算这个位置对应的视频进度值*/
		var current=percent*video.duration;
		/*4.设置当前视频的currenTime*/
		video.currentTime=current;
	});
	
	/*7.播放完毕后重置播放器的状态*/
	video.onended=function(){
		video.currentTime=0;
		$(".switch").removeClass("fa-pause").addClass("fa-play");
		video.style.display="none";
	}
});

4.展示
在这里插入图片描述

5.注意
1.需要引用jquery.js.
2.MP3/MP4/IMG需要自己创建文件夹

啊喳
关注
  • 10
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html制作一个视频播放器,H5 打造属于自己的视频播放器（HTML 篇）
weixin_33613571的博客
06-16 4698
前言众所周知，16 年无疑是直播行业的春天，同时也是 H5 的一次高潮。so，到现在用 H5 技术在移动端做网页直播也是见怪不怪了，但是！！！今天我们的主角是 webApp 下播放视频。参考文献：1)HTML5+CSS3+JQuery 打造自定义视频播放器2)mui Html5 Video 实现方案3)移动端HTML5 video 视频播放优化实践搬好凳子看 HTML首先我们在 HB 下创建一个新...
html5实现视频播放器 弹幕效果,基于HTML5的有弹幕功能的视频播放器
weixin_30068505的博客
06-03 1050
如何使用Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。接下来，在body中需要放置播放器的位置加入如下代码：最后，关键的部分，配置参数，调用插件。$("#danmup").DanmuPlayer({src: "abc.mp4", //视频源height: "480px", //区域的高度width: "800px", //区域的宽度urlToGetDanmu...
实现简易html视频播放器的方法
09-28
主要介绍了实现简易html视频播放器的方法,H5创建视频播放器很简单，您只需要添加一些H5的标签即可创建出炫酷的播放器
探索EasyPlayer.js：强大的HTML5视频播放器解决方案
gitblog_00097的博客
03-25 676
探索EasyPlayer.js：强大的HTML5视频播放器解决方案 项目地址:https://gitcode.com/EasyDSS/EasyPlayer.js EasyPlayer.js 是一个轻量级、高度可定制的HTML5视频播放器，它为开发者提供了一套简洁的API和丰富的配置选项，以满足各种复杂的视频播放需求。这篇文章将带你深入了解这个项目的技术特性，应用场景及其优势。 项目简介 EasyP...
07-HTML5举例：简单的视频播放器
weixin_45311714的博客
09-05 422
我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。
html制作在线视频音乐播放器,JS+html5制作简单音乐播放器
weixin_34239718的博客
05-31 270
dio.paused){audio.play();}}var btn2 = document.getElementById("btn-stop");btn2.onclick = function(){if(audio.played){audio.pause();}}var music = new Array();music = ["李玉刚 - 刚好遇见你","张杰 - 三生三世","朴树 - 平凡...
H5实现一个简易本地视频播放器
sinat_41660714的博客
11-29 5840
注：本例子没有涉及到数据库，是纯前端实现的 要点介绍 video标签是html5新增的一个标签，用于视频播放，在W3C官方文档可以查到它的相关方法，属性和时间，此处我大致介绍一下我用到的一些： 1，方法： play()，视频播放 pause()，视频暂停 load(), 视频加载 2，属性 currentTime,视频的播放进度 duration，视频的总长度 volume，视频的音量 3...
html网页视频播放器代码,HTML网页制作视频播放器现成代码
热门推荐
weixin_33872754的博客
06-09 1万+
2、点击后播放B)帖歌时隐藏播放器且自动播放代码：要了解HTML播放器，就需要了解代码的含义，我这里就以上面的代码为例 src= http://wenwen.sogou.com/z/UrlAlertPage.e?sp=Shttp%3A%2F%2Fcherry.jazzsky.com%2FLIU%2Fall_about_you.wma中src=后面的是音乐连接地址，可以是MP3结尾的也可以是WMA，...
html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！
weixin_39804329的博客
05-31 1463
用HTML5结合Jquery做一个简易版的音乐播放器代码展示：三生草var sum = 1;function ssss(a){var s = document.getElementById('sd');sum = a;s.src = 'music/'+sum+'.mp3';s.play();$('#mar')[0].innerText = '当前播放：'+$('td:eq('+(sum-1)+')...
javascript实现简单的html5视频播放器
10-24
网页视频音频播放器大家并不陌生，在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地...在HTML5发展迅速的今天，让我们尝试用HTML5来制作网页播放器吧，毕竟无论是PC还是移动设备，HTML5是未来的趋势
网页音乐播放器 html5 实验报告 附代码
10-30
实验设计： 1、 用H5设计显示界面。显示内容有当前播放的歌曲名，歌曲进度，上一首、播放/暂停、下一首按钮，声音大小控制，默认播放的音乐等：
简易html5播放器
10-09
一个简单的html5 播放器可以完成播放，暂停，快进，静音，全屏等功能。
Java利用VLC开发简易的视频播放器
01-10
功能：实现使用VLC制作简单的视频播放器，播放本地视频文件。这只是自己写的一个小demo功能比较简单，如果不想花费积分，可以直接根据https://www.cnblogs.com/SnailsRunning/p/10251912.html粘贴代码即可。
sewise HTML5 播放器开发框架
05-22
您不需要掌握任何JavaScript或ActionScript编码技术就可以制作出专业的网页视频播放器。 Sewise Player即可以做为单一的前台播放器来在页面上播放视频和流，也可以结合Sewise Server后台技术实现专业的可交互的点播...
html5 调速 视频播放器,7款很棒的 HTML5 视频播放器
weixin_30160357的博客
06-10 188
作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。在这篇文章中，我收集了7个很棒的HTML5视频播放器，你可以很容易的应用到你的网站中，文章最后还将与大家分享使用 CSS3 和 jQuery 开发一个自定义 HTML5 视频播放器的教程。VideoJSVideoJS 是最流行的 HTML5 视频播放...
CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】
最新发布
m0_73940426的博客
06-20 1208
CSS（Cascading Style Sheets，层叠样式表）是网页设计的核心语言之一，它赋予了网页色彩、布局与动态效果，使得网页不仅具有功能性，更富有艺术美感。本文旨在深入浅出地介绍CSS的基础概念、核心特性和进阶技巧，帮助你从零开始，逐步成长为CSS领域的高手。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 668
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
Html_Css问答集(3)
白话魔法师
06-14 896
html与css学习中的一些疑问，问答中轻松获取知识。
简易音乐播放器html5代码
03-27
<!DOCTYPE html> <html> <head> <title>简易音乐播放器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } h1 { font-size: 36px; font-weight: bold; text-align: center; margin-top: 30px; } audio { display: block; margin: 20px auto; } .controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 20px auto; width: 200px; } .controls button { background-color: #4CAF50; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 100px; } .controls button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>简易音乐播放器</h1> <audio id="myAudio" controls> <source src="music.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <div class="controls"> <button onclick="playAudio()">播放</button> <button onclick="pauseAudio()">暂停</button> <button onclick="stopAudio()">停止</button> </div> <script> var audio = document.getElementById("myAudio"); function playAudio() { audio.play(); } function pauseAudio() { audio.pause(); } function stopAudio() { audio.pause(); audio.currentTime = 0; } </script> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值