效果图：

<!DOCTYPE html>

<html>

<body> 

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

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

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

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

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

  <br />

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

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

    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />

    Your browser does not support HTML5 video.

  </video>

</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>

【HTML5】Video + DOM的更多相关文章

  1. 【HTML5】video视频

    当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5 ...

  2. 【HTML5】video 标签禁用自带的下载按钮

    h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-me ...

  3. 【我的前端自学之路】【HTML5】.html和.htm的区别

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508171.html .htm 和 .html 的区别 .htm 和 ...

  4. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  5. 【浏览器】聊聊DOM

    [浏览器]聊聊DOM 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 作为前端开发,在以前的工作中大多是和DOM打交道,到 ...

  6. Python开发【前端】：DOM

    DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...

  7. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  8. 【Jquery】之DOM操作

    Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1    内容区 1.1  .addClass() (1).addClass(className) <!DOCT ...

  9. 【html5】使用 html5 的十大原因

    你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大 ...

随机推荐

  1. Java-Java中System.arraycopy() 和 Arrays.copyOf()两者之间的区别

    如果我们想拷贝一个数组,我们可能会使用System.arraycopy()或者Arrays.copyof()两种方式.在这里,我们将使用一个比较简单的示例来阐述两者之间的区别. 1.示例代码: Sys ...

  2. C++ 迭代器 基础介绍

    C++ 迭代器 基础介绍 迭代器提供对一个容器中的对象的访问方法,并且定义了容器中对象的范围.迭代器就如同一个指针.事实上,C++的指针也是一种迭代器.但是,迭代器不仅仅是指针,因此你不能认为他们一定 ...

  3. POJ 2492 并查集扩展（判断同性恋问题）

    G - A Bug's Life Time Limit:10000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u S ...

  4. Python Django 的 django templatedoesnotexist

    django 1.8版本的解决方案 在  setting.py 这个文件里 TEMPLATES = [ ...... #原来的 #'DIRS': [ ], //  这个 列表里添加 template路 ...

  5. emu1

    第一题 一个很奇怪的贪心.先排序一遍,再扫描一遍,能加入尽量加入,不能加入就一定不能加入..由于每次都在可能的最早时间加入一个数可以保证差最小?反正差不多这样了. O(n log n) #includ ...

  6. XPath学习:轴(3)——descendant

    XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...

  7. Netbeans 配置英文和默认utf-8编码

    JAVA SDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads 解决办法: 进入netbeans 6.5\etc ,其中ne ...

  8. InnoDB主键设计

    InnoDB是clustered-index table,因此对于InnoDB而言,主键具有特殊意义. 可以通过主键直接定位到对应的某一数据行记录的物理位置,主键索引指向对应行记录,其他索引则都指向主 ...

  9. MYSQL索引失效的各种情形总结

    1) 没有查询条件,或者查询条件没有建立索引  2) 在查询条件上没有使用引导列  3) 查询的数量是大表的大部分,应该是30%以上.  4) 索引本身失效 5) 查询条件使用函数在索引列上,或者对索 ...

  10. DOS命令符基本操作

    怎么改变DOS默认路径 开始->所有程序->附件->命令提示符,在“命令提示符”上右键,选择“属性”,(或者在快捷方式上点击属性)会弹出一个“命令提示符 属性”对话框,可以通过修改该 ...