html5-8 如何控制html5中的视频标签和音频标签
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中的视频标签和音频标签的更多相关文章
- HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- 在原生开发中控制HTML5视频!
在原生开发中控制HTML5视频! PC端 视频如何自动播放! 在video标签中添加 autoplay + muted(静音属性!) 温馨提醒: video是一个块级元素! 但是唯一的缺陷就是视频没有 ...
- html5中插入视频和音频
<audio src="1.mp3" controls></audio> <video src="1.mp4" controls& ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- （转） 浅析HTML5在移动应用开发中的使用
(转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67 2012-03-07 来自 UECD.163.com 编辑 wangguo ...
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- 使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- 使用CKplayer插件在网页中嵌入视频的方法（常用笔记2）
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
随机推荐
- 3.第一个Node.js程序：Hello World！
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 以下是我们的第一个Node.js程序: console.log("Hello Wor ...
- 一个理性战胜感性的成功案例：P2P投资和活期理财，纠结中提炼出来的1个数学问题
我经常是投资了P2P,然后用钱,因而损失了一部分收益. 这是一个让我纠结的问题,为了解决这个问题,我不再凭感觉,而是从现实情况,提炼出来1个数学题,解答我的疑惑. 这是一个理性战胜感性的成功案例~ P ...
- CList 点击表头排序 （3）两种排序的第二种
在头两篇中介绍了CListCtrl::SortItems() 方法的使用和其中的一个排序方法,这篇介绍另一种方法 CList 点击表头排序 (1)SortItems函数 CList 点击表头排序 (2 ...
- 【Codeforces Round #453 (Div. 2) C】 Hashing Trees
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然只有当a[i]和a[i-1]都大于1的时候才会有不同的情况. a[i] >= a[i-1] 且a[i-1]>=2 则 ...
- Activity学习
http://www.360doc.com/content/13/1106/11/203871_327110236.shtml http://www.jianshu.com/p/e6971e8a8da ...
- 洛谷 P2374 搬运工
P2374 搬运工 题目背景 陈老师喜欢网购书籍,经常一次购它个百八十本,然后拿来倒卖牟取暴利.(ps:描述要看懂) 题目描述 前些天,高一的新同学来了,他便像往常一样兜售他的书,经过一番口舌,同学们 ...
- 数学定理证明机械化的中国学派（II）
所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...
- 洛谷 P1205 [USACO1.2]方块转换 Transformations
P1205 [USACO1.2]方块转换 Transformations 题目描述 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方形图案.写一个程序来找出将原始 ...
- BingMap频繁Add Pushpin和Delete Pushpin会导致内存泄露
近期在做性能測试的时候发现BingMap内存泄露(memory leak)的问题,查找了一些国外的帖子,发现也有类似的问题,可是没有好的解决的方法. https://social.msdn.micro ...
- 基于ContentObserver来动态取消或加入屏幕超时任务
前面也说了.ContentObserver能够来监控数据库里某一项数据的变化,当然也能够同一时候监控多个数据项的变化. 笔者在项目中须要改动到屏幕超时的需求,比方在车载业务中,倒车事件发生的时候,是不 ...