html5视频控制效果

好吧,来看一个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格式,代码如下。

<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" onclick="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前端开发技术,分享网页相关资源。
---------------------------------------------------------------

html5视频控制效果,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。