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. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  2. ECMAScript6 初步认识

    JavaScript由3部分组成,分别是:Dom,BOM和ECMAScript !核心(ECMAScript):由ECMA-262定义,提供核心语言功能:ECMAScript是属于国际标准化语言,所有 ...

  3. js 预处理用户上传图片

    前几个月闲得无聊写得一段代码,没想最近刚好用上了,在硬盘里翻了半天找回来,还没好好整理直接用上了手机用户拍照上传的图片一般都在1M 到4M 之间,如果只是用作头像尺寸就可以缩小很多,1M甚至几M的图转 ...

  4. PHP基础知识之流程控制的替代语法

    PHP 提供了一些流程控制的替代语法,包括 if,while,for,foreach 和 switch. 替代语法的基本形式是把左花括号({)换成冒号(:),把右花括号(})分别换成 endif;,e ...

  5. 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...

  6. poj3750-小孩报数问题(约瑟夫环)

    一,题意: 中文题.二,思路: 1,输入. 2,无限循环1~n~1~n,直到输出n次,再跳出. 3,输出名字,并标记. 普通模拟版: #include<iostream> #include ...

  7. AWS 免费套餐

    AWS 免费套餐 转载自:https://aws.amazon.com/cn/free/?sc_channel=PS&sc_campaign=acquisition_CN&sc_pub ...

  8. iOS开发系列--Objective-C之协议、代码块、分类

    概述 ObjC的语法主要基于smalltalk进行设计的,除了提供常规的面向对象特性外,还增加了很多其他特性,这一节将重点介绍ObjC中一些常用的语法特性.当然这些内容虽然和其他高级语言命名不一样,但 ...

  9. SQL Server 执行计划缓存

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/内存池/缓冲区 概述 了解执行计划对数据库性能分析很重要,其中涉及到了语句性能分析与存储,这也是写这篇文章的目的,在了解执行计划之 ...

  10. 人生苦短，我用python——当我在玩python的时候我玩些什么

    文章背景 家里的第一台电脑是在2006年夏天买的,10年上大学之后基本上就没人用,过没两年就当二手卖给一个熟人. 弟弟小我10岁,今年刚上初一.他在我毕业前半年就整天用妈妈的手机发短信给我,问我什么时 ...