html5-8 如何控制html5中的视频标签和音频标签

一、总结

一句话总结：找到视频或者音频的element对象，然后查手册看对应的方法或者属性就可以，里面有控制的。

1、如何控制html5中的视频标签和音频标签？

找到视频或者音频的element对象，然后查手册看对应的方法或者属性就可以，里面有控制的。

59 //找到视频对象

60 vid=document.getElementById('vid');

61

62 //开始

63 function start(){

64     vid.play();

65 }

66

67 //暂停

68 function pause(){

69     vid.pause();

70 }

2、视频和音频播放方法和暂停方法是什么？

play()和pause()

二、如何控制html5中的视频标签和音频标签

1、相关知识

HTML5视频标签:
<video src="movie.ogg" controls="controls" autoplay loop width='1200px' height='500px'>
</video>

HTML5音频、视频控制:
1.vobj.play();
2.vobj.pause();

HTML5音频标签:
<audio src="go.mp3" controls="controls"  autoplay loop>
</audio>

2、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         .container{

             width:1200px;

             /*background: #ccc;*/

             height:600px;

             margin:0 auto;

         }

         header{

             height:50px;

             background: #272822;

         }

         section{

             height:500px;

             margin:15px 0px;

         }

         footer{

             height:50px;

             background: #272822;

         }

         article{

             float:left;

             margin-left:30px;

         }

     </style>

 </head>

 <body>

     <!-- 主体 -->

     <div class="container">

         <!-- 头部 -->

         <header>

         </header>

         <!-- 体部 -->

         <section>

             <video src="cartoon.webm" width='1200px' id='vid'></video>

             <p>

                 <button onclick='start()'>播放</button>

                 <button onclick='pause()'>暂停</button>

             </p>

         </section>

         <!-- 尾部 -->

         <footer>

         </footer>

     </div>

 </body>

 <script>

 //找到视频对象

 vid=document.getElementById('vid');

 //开始

 function start(){

     vid.play();

 }

 //暂停

 function pause(){

     vid.pause();

 }

 </script>

 </html>
 

html5-8 如何控制html5中的视频标签和音频标签的更多相关文章

  1. HTML5新增的音频标签、视频标签

    我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...

  2. IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件

    IIS 配置 FTP 网站   在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...

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

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

  4. html5中插入视频和音频

    <audio src="1.mp3" controls></audio> <video src="1.mp4" controls& ...

  5. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  6. （转） 浅析HTML5在移动应用开发中的使用

    (转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67   2012-03-07  来自 UECD.163.com  编辑 wangguo ...

  7. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  8. 使用按钮控制HTML5背景音乐开关

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 使用CKplayer插件在网页中嵌入视频的方法（常用笔记2）

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

随机推荐

  1. 74.sscanf数据扫描

    "%[0-9A-Za-z] 读取一个集合,遇到不是数组或者大小写字母跳出   %*[^0-9A-Za-z]读取所有的非数字字母的字符,忽略 示例: ]= "123sadsadasd ...

  2. Spring中事务的XML方式[声明方式]

    事务管理: 管理事务,管理数据,数据完整性和一致性 事务[业务逻辑] : 由一系列的动作[查询书价格,更新库存,更新余额],组成一个单元[买书业务], 当我们动作当中有一个错了,全错~ ACID 原子 ...

  3. IIS发布asp.net mvc项目(asp.net core也是一样)

    因为之前都是利用其他的工具在linux上面进行发布,导致现在忘记了在IIS上面怎么发布,现在就记录下来,以防不时之需吧 第一步: 在vs里面进行项目发布:指定好发布的位置,点击发布就好了 第二步:右击 ...

  4. AJAX - 封装AJAX GET 数组join( )方法 键值对取value POST请求参数注意点

    function objToStr(obj){ obj.t = new Date().getTime(); // 给obj动态增加了一个属性 // 这个给对象添加属性的方法, 会被直接加到键值对里?? ...

  5. Java Drp项目实战——Servlet

    由来 在解说Servlet之前须要先介绍一个词语CGI即Common GatewayInterface是通用网关接口的意思.它提供一个计算机程序同HTTP协议或者WWW服务的接口,也就是人机交互接口的 ...

  6. POJ--1753--Flip Game【DFS】

    链接:http://poj.org/problem? id=1753 题意:一个4*4的方格,有白棋或者黑棋.每次操作是一个位置的颜色翻转,即白变黑.黑变白,而且与它相邻的四个位置的颜色也都跟着改变, ...

  7. Android怎样实现毛玻璃效果之Android高级模糊技术

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果.磨砂效果.各大系统就開始竞相模仿,这是如何的一个效果呢,我们先来看一下,如以下的图片: 效果我们知道了,怎样在Android中实现呢. ...

  8. CentOS6重启后DNS被还原的解决办法

    CentOS6重启后DNS被还原的解决办法 http://luyx30.blog.51cto.com/1029851/1070765/ centos6.5的64位系统,修改完/etc/sysconfi ...

  9. Redis笔记教程

    一.redis简介 1.1.1.什么是redis? REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. 读 ...

  10. GO语言学习（十二）Go 语言函数

    Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...