视屏

最新推荐文章于 2022-05-09 16:05:30 发布

周朝兵

最新推荐文章于 2022-05-09 16:05:30 发布

阅读量339

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_45251955/article/details/103896331

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

视屏

Web站点上的视屏一直到现在为止，任然不存在一项只在网页上显示视屏的标准，大多数视屏是通过插件来显示的。但是，并不是所有浏览器都拥有同样的插件。HTML5规定了一种通过video来包含视屏的标准方法。
video元素提供了播放、暂停、音量控件来控制视频，它支持三种视屏格式，分别是MP4、WebM、Ogg

video视频中的属性

autoplay 视频在就绪后马上播放。
controls 向用户显示控件，比如播放按钮。
height 设置视频播放器的高度。
loop 当媒介文件完成播放后再次开始播放。
muted 视频的音频输出为静音。
poster 正在下载时显示的图像，直到用户点击播放按钮。
preload 在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src 要播放的视频的 URL。
width 视频播放器的宽度。

video元素默认的宽高为300*150
通过js控制的属性分别为：
enden ：是否播放到结束
paused ：当前是否处于暂停状态
currentTime ：播放到的当前时间
duration ：影片的总时长
play() ：开始播放
pause() ：暂停播放
load() ：重新加载

举例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	video{
		width: 500px;
		height: 280px;
		border: 1px solid;
	}
</style>
<body>
	<video src="cherryMV.mp4" controls="controls">
	</video>
	<script type="text/javascript">
	</script>
</body>
</html>

效果图：

需要注意的是video元素在引入视频的时候需要加上 controls 属性，否则就会只是一张图片，但是在这里不建议使用，最好自己写播放控件，第一个原因是controls属性在不同的浏览器上显示的播放控件会有所差别，而且兼容性不好；第二个原因是因为这种自带的控件在同一个浏览器上显示的都一样，在用户看来千篇一律的，没有新颖感。所以我建议还是自己写控件比较好。
以下是我个人写的一个小案例，自己写的控件，给大家参考一下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	video{
		top: 0px;
		left: 0px;
		width: 800px;
		height: 500px;
		position: relative;
		z-index: 0;
	}
	.p1{
		width: 80px;
		height: 80px;
		position: absolute;
		margin-left: 400px;
		margin-top: 250px;
		z-index: 2;
		cursor: pointer;
	}
	.p2{
		width: 80px;
		height: 80px;
		position: absolute;
		margin-left: 400px;
		margin-top: 250px;
		z-index: 2;
		cursor: pointer;
	}
	.top{
		width: 800px;
		height: 500px;
		/*border: 1px solid;*/
	}
	.cent{
		position: absolute;
		width: 800px;
		height: 450px;
		background-color: #111;
		opacity: 0.3;
		margin-top: -508px;
		display: none;
		
	}
	.gg{
		position: absolute;
		z-index: 1;
		margin-left: 320px;
		margin-top: 155px;
		/*display: none;*/
	}
	.but{
		width: 700px;
		height: 10px;
		border-radius: 5px;
		border:1px solid;
		position: absolute;
		top: 470px;
		left: 50px;
		background-color: #ccc;
	}
	.p3{
		width: 40px;
		height: 40px;
		position: absolute;
		margin-top: -68px;
	}
	.qup{
		color: #ccc;
		margin-top: -50px;
		margin-left: 765px;
		position: absolute;
		cursor: pointer;
	}
</style>
<body>
<div class="top">
	<img src="imgs/pause.png" class="p2">
	<img src="imgs/play.png" class="p1">
	<img src="imgs/clothes04.jpg" class="gg">
	<video src="res/strawberry1.mp4"></video>
	<!-- <img src="imgs/pause02.png"> -->
	<img src="imgs/play02.png" class="p3">
	<span class="qup">全屏</span>
	<div class="but"></div>
</div>
<div class="cent"></div>
</body>
<script type="text/javascript">
var vie = document.getElementsByTagName("video")[0];
var p1 = document.getElementsByClassName("p1")[0];
var p2 = document.getElementsByClassName("p2")[0];
var cent = document.getElementsByClassName("cent")[0];
var gg = document.getElementsByClassName("gg")[0];
var but = document.getElementsByClassName("but")[0];
var p3 = document.getElementsByClassName("p3")[0];
var qup = document.getElementsByClassName("qup")[0];
p1.onclick = function (){
	vie.play();
	p1.style.display = "none";
	gg.style.display = "none";
	cent.style.display = "none";
	
}
p2.onclick = function (){
	vie.pause();
	p1.style.display = "block";
	p2.style.display = "block";
	gg.style.display = "block";
	cent.style.display = "block";
}
var ds = setInterval(jdt,1000);
function jdt(){
	but.style.width = vie.currentTime*9 + "px" ;
	if(but.ended){
		clearinterval(ds);
	}
}
p3.onclick = function (){

	if(vie.paused){
		vie.play();
		p3.src = "imgs/pause02.png";
		p1.style.display = "none";
		p2.style.display = "none";
		gg.style.display = "none";
		cent.style.display = "none";
	}else{
		vie.pause();
		p3.src = "imgs/play02.png";
		p1.style.display = "block";
		p2.style.display = "block";
		gg.style.display = "block";
		cent.style.display = "block";
	}
}
qup.onclick = function (){
	vie.webkitRequestFullScreen();
}
</script>
</html>

连接到下一篇博客“音频”

周朝兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视屏

视屏Web站点上的视屏一直到现在为止，任然不存在一项只在网页上显示视屏的标准，大多数视屏是通过插件来显示的。但是，并不是所有浏览器都拥有同样的插件。HTML5规定了一种通过video来包含视屏的标准方法。video元素提供了播放、暂停、音量控件来控制视频，它支持三种视屏格式，分别是MP4、WebM、Oggvideo视频中的属性autoplay 视频在就绪后马上播放。controls ...
复制链接

扫一扫

专栏目录