HTML5-video标签-实现点击预览图播放或暂停视频
来源:互联网 发布:搜狗拼音去广告优化版 编辑:程序博客网 时间:2024/06/07 02:57
HTML5-video标签-实现点击预览图播放或暂停视频
刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性。这时我才真的发现到html5和css3的强大。
之前关于视频的控制更多的是运用复杂来实现,但在html5中新加入了<video>
标签以及相应的DOM,通过这项新特性,我们能对网页中的视频进行更多简单的控制。
以下属性内容摘抄至W3CSchool
浏览器支持:
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。
注释:Internet Explorer 8 以及更早的版本不支持 标签。
定义和用法
标签定义视频,比如电影片段或其他视频流。
提示和注释
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
属性:
new : HTML5 中的新属性。
点击视频预览图实现播放或暂停视频
首先要设置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部分对视频播放 不起到影响,暂时就先不在这里贴出来了。
0 0
- HTML5-video标签-实现点击预览图播放或暂停视频
- html5实现视频播放<video>
- [HTML5] Video 标签播放及控制视频
- 使用HTML5的video标签播放视频
- Web视频播放 之 【HTML5 Video标签】
- html5-video视频标签播放视频实现过程中遇到的一系列问题。
- html5-video视频播放
- 视频播放- video标签
- html5 video视频标签
- HTML5视频标签video
- web项目引用html5 video标签实现视频播放的坑
- video标签-点击封面 播放视频,显示进度条
- html video 视频的播放与暂停
- html5实现视频(放大缩小播放暂停)
- html5实现视频(放大缩小播放暂停)
- android html5<video> 视频播放
- HTML5 - 使用<video>播放视频
- HTML5 - 使用<video>播放视频
- [opencv]识别人脸和眼睛
- 通讯录的实现(动态实现)
- 哈希表的应用-浅析顶点聚簇网格简化算法的实现
- Android Drawable Resource目录-概要
- 浅议顶点焊接与哈希表的设计
- HTML5-video标签-实现点击预览图播放或暂停视频
- ToggleButton的使用
- 扑克牌的顺子
- 种子点生长算法下——三维种子点生长
- 解决easyDialog弹出框加载延时图片的时候不居中问题
- Android Drawable - Shape Drawable使用详解(附图)
- 使用ItemTouchHelper类轻松实现RecyclerView的拖拽和侧滑
- 三角网格数据结构
- 架构漫谈(五):什么是软件