html5视频控制效果

来源：互联网发布：gps信号增强软件编辑：程序博客网时间：2024/06/05 17:51

好吧，来看一个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" 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前端开发技术，分享网页相关资源。
---------------------------------------------------------------

20 0