html5视频控制效果

逃离我推掉我的手 2022-08-26 08:37 178阅读 0赞

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

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

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

首先看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的

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

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

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

\---------------------------------------------------------------

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

[Link 1]: http://gx.zptc.cn/whqet/video/index.html
[Link 2]: http://codepen.io/whqet/pen/zpqBI
[Link 3]: http://codepen.io/whqet/share/zip/zpqBI/
[Link 4]: http://pan.baidu.com/s/1kTn0ixT
[whqet]: http://blog.csdn.net/whqet