html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间

Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.

实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!

DEMO DOWNLOAD

HTML5 Video 基础标签

1 video id=myVideo controls poster=video.jpg width=600 height=400

2 source src=video.mp4 type=video/mp4 /

3 source src=video.webm type=video/webM /

4 source src=video.ogv type=video/ogg /

5 pYour browser does not support the video tag./p

6 /video

video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！

开始制作 HTML5 Video Controls

幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.

在编码之前让我简单的介绍一下jQuery是如何获取video标签的.

在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$(videoID)会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.

1 //return a DOM object

2 var video = document.getElementById('videoID'); //or

3 var video = $('#videoID').get(0); //or

4 var video = $('#videoID')[0];

6 //return a jQuery object

7 var video = $('#videoID');

Video Play/Pause Controls 播放/暂停按钮

好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.

1 div class=control

2 a href=# class=btnPlayPlay/Pause/a

3 /div

我们可以轻松的控制Html5 Video的播放与暂停状态.

1 //Play/Pause control clicked

2 $('.btnPlay').on('click', function() {

3 if(video[0].paused) {

4 video[0].play();

5 }

6 else {

7 video[0].pause();

8 }

9 return false;

10 };

取消

html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间相关推荐

html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
html5视频播放器隐藏控制,HTML5 video标签（播放器）学习笔记（二）:播放控制
上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括 ...
html5 dom video,HTML5 / HTML5 video - 使用 DOM 进行控制 - 汇智网
HTML5 < video > - 使用 DOM 进行控制 HTML5 < video > 和 < audio > 元素同样拥有方法.属性和事件. < vid ...
android+第三发输入法控制,android输入法属性使用，软键盘隐藏、显示状态控制大揭秘...
经常会遇到需要控制输入法的情况,如输入法显示.隐藏: 输入法弹出后,界面被顶上去或编辑框被遮挡等问题:下面分为几个部分总结输入法属性设置,及输入法控制. 一.windowSoftInputMode设置 ...
使用jQuery和CSS自定义HTML5 Video 控件
http://www.cnblogs.com/lucker/archive/2013/03/01/2939163.html Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本 ...
HTML5 Video(视频)，HTML 音频(Audio)
HTML5 Video(视频), 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频直到现在,仍然不存在一项旨在网页上 ...
如何使用html5的video标签,关于html5 video标签的使用方法
关于html5 video标签的使用方法发布时间:2020-07-23 16:39:31 来源:亿速云阅读:92 作者:清晨小编给大家分享一下关于html5 video标签的使用方法,希望大家阅 ...
HTML5 video标签的播放控制
转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...

html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间

html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间相关推荐

最新文章

热门文章