HTML5-video标签-实现点击预览图播放或暂停视频
2016-05-17 00:58
666 查看
HTML5-video标签-实现点击预览图播放或暂停视频
刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性。这时我才真的发现到html5和css3的强大。之前关于视频的控制更多的是运用复杂来实现,但在html5中新加入了
<video>标签以及相应的DOM,通过这项新特性,我们能对网页中的视频进行更多简单的控制。
以下属性内容摘抄至W3CSchool
浏览器支持:
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。
注释:Internet Explorer 8 以及更早的版本不支持 标签。
定义和用法
标签定义视频,比如电影片段或其他视频流。
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
属性:
new : HTML5 中的新属性。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
点击视频预览图实现播放或暂停视频
首先要设置video的预览图,这时<video>中的poster属性很好的完成了这个工作。
关于视频的播放控制需要用到video的dom事件,这里先不详述了,以后有机会再将其详细属性搬运过来。这里主要运用到了play() ;pause()这两个事件。
下面是一个自己这两天写的通过点击视频预览图实现视频播放或暂停
HTML部分:
<div class="video_main dw"> <ul> <li class="video_main_video left"> <video id="videoPlay1" width="262" height="195" src="video/audio.mp4" poster="img/video.jpg" loop="loop" x-webkit-airplay="true" webkit-playsinline="true"> 您的浏览器暂不支持播放该视频,请升级至最新版浏览器。 </video> </li> </ul> </div>
js部分:
var video1=document.getElementById("cideoPlay1"); video1.onclick=function(){ if(video1.paused){ video1.play(); }else{ video1.pause(); } }
CSS部分对视频播放 不起到影响,暂时就先不在这里贴出来了。
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- 视频分割 Ultra Video Splitter V4.0.4 汉化版 下载
- 原生js结合html5制作小飞龙的简易跳球
- User Scripts: Video Download by User Scripts
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能