在移动端怎么将HTML5中的video标签的控件去掉或者隐藏

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签中，输入js代码：。

if (navigator.userAgent.match(/mobile/i)) {

$('video').hide()

}

3、浏览器运行index.html页面，此时在移动端中成功隐藏了video标签的控件。

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

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<p>Your 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]

5

6 //return a jQuery object

7 var video = $('#videoID')

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

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

1 <div class="control">

2<a href="#" class="btnPlay">Play/Pause</a>

3 </div>

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

1 //Play/Pause control clicked

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

3if(video[0].paused) {

4 video[0].play()

5}

6else {

7 video[0].pause()

8}

9return false

10 }

---