html5控制视频,html5视频控制效果

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

到这里观看效果，到这里在线研究，或者下载收藏,

视频加载可能有点慢，请耐心等等。

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

当前浏览器不支持 video直接播放，点击这里下载视频： 下载视频

我们这里仅仅使用了mp4格式，代码如下。

当前浏览器不支持 video直接播放，点击这里下载视频：

下载视频

play

在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前端开发技术，分享网页相关资源。

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