html5视频控制效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家

好吧，来看一个html5的video元素的应用，实现简单控制。

到这里观看效果，到这里在线研究，或者下载收藏, 视频加载可能有点慢，请耐心等等。

首先看html5，这里主要用到了video元素，video元素用法如下

<video width="800" height="" poster="pic url">
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogv" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
	<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
		<param name="movie" value="myvideo.swf" />
		<param name="flashvars" value="autostart=true&file=myvideo.swf" />
	</object>
		当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

我们这里仅仅使用了mp4格式，使用了w3官方的实例视频，特别感谢，代码如下。

<div id="videoContainer">
	<video id="video" poster="img/img.jpg">
		<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>
		当前浏览器不支持 video直接播放，点击这里下载视频：
		<a href="http://media.w3.org/2010/05/sintel/trailer.mp4">
			下载视频
		</a>
	</video>
	<button id="videoCtrl" οnclick="p();" value="play">
		play
	</button>
</div>

在css中，我们主要需要实现#videoContainer的进入动画，控制按钮的hover动画。

#videoContainer的进入动画和样式设置是这样的

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px)
	}
	60% {
		opacity: 1;
		transform: translateX(30px)
	}
	80% {
		transform: translateX(-10px)
	}
	100% {
		transform: translateX(0)
	}
}
#videoContainer {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 600px;
	height: 336px;
	border: 10px solid #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	animation: bounceInLeft 1s .2s ease both;
}

控制按钮#videoCtrl的样式设置与hover动画这样搞定

#video {
	width: 600px;
}
#videoCtrl {
	border: none;
	cursor: pointer;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	opacity: 0;
	transition: all 1s;
	transform: rotateX(0deg);
}
#videoContainer:hover #videoCtrl {
	opacity: 1;
	transform: rotateX(360deg);
}

最后看js的

var video = document.getElementById("video");
var ctrl = document.getElementById("videoCtrl");
function p() {
	if (video.paused) {
		video.play();
		ctrl.innerText = "stop";
	} else {
		video.pause();
		ctrl.innerText = "play";
	}
}

完工，主要学习video的使用和video的常用属性和常用方法的使用。

html5视频的相关内容大家可以参考教程。

希望可以对您有所帮助，多谢捧场，欢迎拍砖！

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------