续Html5
HTML5 规定了一种通过 video 元素来包含视频的标准方法
当前video元素支持的三种视频格式
首先呢，显示视频所需要的是
<video src="movie.ogg" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器会使用第一个可识别的格式：
<video width="320" height="240" controls="controls">
<source src="img/ogg-19M.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
效果：
<video>标签的属性
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| preload | preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度 |
为视频创建简单的播放/暂停以及调整尺寸控件：
调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width
<!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的更多相关文章
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- html5增强元素--续
progress元素使用例子 <script> ; function progress_demo() { ) { i++; updateProgress(i); setTimeout(pr ...
- HTML5实现文件断点续传
HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割.前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段 ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- HTML5服务器推送消息的各种解决办法
摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- HTML5 随音乐节奏变化的频谱图动画
这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的.页面上的Audio标签只是HTML5更语义化的一个表现,而HTML5提供给JavaScript编程用的Audio API则让我们有能力 ...
- HTML5 乱记
HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE h ...
- HTML5 File api 实现断点续传
目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...
随机推荐
- Centos7 安装node（8版本）
最简洁的命令 yum -y update yum -y install gcc make gcc-c++ openssl-devel wget vim(后面两个如果没有再选择安装) cd /usr/l ...
- Python——爬取百度百科关键词1000个相关网页
Python简单爬虫——爬取百度百科关键词1000个相关网页——标题和简介 网站爬虫由浅入深:慢慢来 分析: 链接的URL分析: 数据格式: 爬虫基本架构模型: 本爬虫架构: 源代码: # codin ...
- c# 引用类型对象的深拷贝
c#中的对象大体分为值类型和引用类型,值类型大致包括 int, struct等,引用类型大致包括 自定义Class,object 等.string属于特殊的引用类型,不在本文的讨论之内. 值类型直接存 ...
- MVC引入SERVICE层 提高代码重用性 沟通CONTROL和MODEL
MVC是web开发中常见的程序结构. 简单的mvc结构如下: view层:显示层. control层:业务层,集合了各种action. model层:模型层,一般和数据打交道.简单的sample:一个 ...
- LinuxShell脚本编程7-for和while
1.for的使用 #! /bin/bash ` do echo $a done 表示:a初始值为1,然后a=a+2的操作,一直到a<=10为止 for((i=1;i<=10;i=i+2)) ...
- 【随笔】使用apt-spy来更新你的debian源
debian什么最方便,当然是用apt-get intsall 命令来安装软件了.使用apt-get什么最重要,自然是下载源了. debian版本自带的源肯定不是最快的,考虑到个人所处的位置.网速等方 ...
- 9、在Shell脚本中调用其他脚本
在Shell脚本的执行过程中,Shell脚本支持调用另一个Shell脚本,调用的格式为:程序名 实例:在Shell脚本test1中调用test2. 1.调用test2#test1脚本root@ubun ...
- jenkins配置ssh
1.不使用密钥,不配置 2.使用用户名密码配置 3.构建完成后,将文件发送到指定服务器 要拷贝的文件是/var/lib/jenkins/web1/src/*.js
- 原创：微信小程序亲测体验，公众号入口曝光！
扫描即可体验知乐微信小程序,并且看到入口 你可以在这里看到相应的小程序:微信小程序商店 发现内有历史列表入口 真实小程序 搜索 操作栏 放置到桌面示意图必须搜索全称,才可以搜索到小程序 推荐给朋友,可 ...
- 浅谈MES系统SMT的JIT功能（二）：JIT流程
上周说到JIT的原理,今天就说说JIT功能的基本流程:从维护基本信息——>生产人员排程——>仓库人员发料——>生产上料——>JIT物料配送看板拉到仓库人员发第二次料,循环上料发 ...