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前端开发技术,分享网页相关资源。
---------------------------------------------------------------
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。