HTML5 <video> 使用 DOM 进行控制

一、HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <div style="text-align:center;">

            <video id="video1" width="420" style="margin-top:55px;">

                <source src="img/mov_bbb.mp4" type="video/mp4" />

                <source src="img/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video.

            </video>

            <br />

            <button onclick="playPause()">播放/暂停</button>

            <button onclick="makeBig()">大</button>

            <button onclick="makeNormal()">中</button>

            <button onclick="makeSmall()">小</button>

        </div>

        <script type="text/javascript">

            var myVideo = document.getElementById("video1");

            function playPause() {

                if(myVideo.paused)

                    myVideo.play();

                else

                    myVideo.pause();

            }

            function makeBig() {

                myVideo.width = 560;

            }

            function makeSmall() {

                myVideo.width = 320;

            }

            function makeNormal() {

                myVideo.width = 420;

            }

        </script>

    </body>

</html>

1、chrome浏览器测试

2、IE9在测试

3、IE8浏览器测试

HTML5 视频（二） <video> 使用 DOM 进行控制的更多相关文章

  1. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  2. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  3. HTML 5 简介、视频、Video + DOM、音频、拖放

    HTML5 是下一代的 HTML. 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...

  4. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  5. 在原生开发中控制HTML5视频!

    在原生开发中控制HTML5视频! PC端 视频如何自动播放! 在video标签中添加 autoplay + muted(静音属性!) 温馨提醒: video是一个块级元素! 但是唯一的缺陷就是视频没有 ...

  6. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  7. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  8. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  9. 【转】Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

随机推荐

  1. Unity自动寻路Navmesh之高级

    隔离层自动生成寻路网格 (源码scene1.unity) 1.创建Plane实例P1,P2,两者之间出现一条鸿沟.直接控制角色位移是无法通过的. 2.打开Navigation窗口,分别选中P1,P2, ...

  2. PHP基础知识之变量

    定义: 变量用一个美元符号后面跟变量名来表示,如:$user 变量引用赋值: 引用赋值用一个&后面跟源变量名来表示,如:$copy=&$user(注:$bar = &(24 * ...

  3. java中文乱码解决之道（三）-----编码详情：伟大的创想---Unicode编码

    随着计算机的发展.普及,世界各国为了适应本国的语言和字符都会自己设计一套自己的编码风格,正是由于这种乱,导致存在很多种编码方式,以至于同一个二进制数字可能会被解释成不同的符号.为了解决这种不兼容的问题 ...

  4. Spark使用实例

    1.介绍 Spark是基于Hadoop的大数据处理框架,相比较MapReduce,Spark对数据的处理是在本地内存中进行,中间数据不需要落地,因此速度有很大的提升.而MapReduce在map阶段和 ...

  5. css垂直居中那点事

    这是我技术博客生涯的第一篇文章,想想还是有点小鸡冻...菜鸟的征程现在要开始了 学习css的时候经常被各种问题纠结到不要不要的,没办法,只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小 ...

  6. 【转】Spark常见问题汇总

    原文地址:https://my.oschina.net/tearsky/blog/629201 摘要: 1.Operation category READ is not supported in st ...

  7. python & mongo问题记录

    背景介绍 使用python操作mongo进行的一些操作记录,为了方便日后可以快速的解决类似问题. 准备工作 为了尽可能简单的说明,我将插入几条简单的数据. from pymongo import Mo ...

  8. python基础总结篇——使用Mysql

    python操作Mysql,很方便,使用的MySQLdb的库,基本的操作如下: 查询: try: conn = MySQLdb.connect(host=self.ip, user=self.user ...

  9. 判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口，传递回去

    首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...

  10. SSIS Data Flow 的 Execution Tree 和 Data Pipeline

    一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...