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的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. html5增强元素--续

    progress元素使用例子 <script> ; function progress_demo() { ) { i++; updateProgress(i); setTimeout(pr ...

  3. HTML5实现文件断点续传

    HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割.前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段 ...

  4. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  5. HTML5服务器推送消息的各种解决办法

    摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制.这就意味着如 ...

  6. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  7. HTML5 随音乐节奏变化的频谱图动画

    这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的.页面上的Audio标签只是HTML5更语义化的一个表现,而HTML5提供给JavaScript编程用的Audio API则让我们有能力 ...

  8. HTML5 乱记

    HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对 HTML5 一无所知的浏览器,也就是说,可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE h ...

  9. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

随机推荐

  1. js 面向对象 定时器 046

    获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...

  2. 小众软件：windows 系统下 exe 文件打包软件

    1. Enigma Virtual Box 单文件打包软件 官网:EnigmaProtection 2. 安装包打包软件 官网:Inno Setup 参考文献: [1] 单文件制作工具Enigma V ...

  3. (转)Shell常用的特殊位置参数变量说明

    Shell常用的特殊位置参数变量说明 原文:http://m.blog.itpub.net/15498/viewspace-2151142/ $0    获取当前执行的shell脚本的文件名,如果执行 ...

  4. android 拍照和从相册选择组件

    android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...

  5. IBM Worklight OutOfMemoryError: Java heap space 错误

    在启动  IBM Worklight 6.0 server 的时候,报了一个  OutOfMemory 的错误: [INFO    ] FWLSE4006I: Worklight Studio is ...

  6. [Unity3D]Shader编程之动态屏幕遮罩

    转载 https://blog.csdn.net/u012741077/article/details/78425834 屏幕可视范围跟随目标物体移动,可修改可视范围大小,边缘渐变大小.以及遮罩颜色, ...

  7. 1.7 js基础，字符串、数组小结

    一.arguments  实参参数的数组         实参[实际的值],形参[形式上的参数]         当参数个数不固定的时候使用.         示例: script> var g ...

  8. WebDriverWait介绍

    转自:https://www.cnblogs.com/ella-yao/p/7778678.html WebDriverWait介绍 package com.test.elementwait; imp ...

  9. efcore 配置链接sqlserver

    本文将在asp.net core api 项目中使用efcore corefirst模式 简单配置链接sqlserver数据库,以及简单的数据库迁移操作 一 新建项目 1. 首先我们先用vs2017 ...

  10. 使用 typeof 来检测对象是否undefined

    需求 判断是否为undefined 解决 使用 typeof 来检测对象是否已定义: if (typeof Obj !== "undefined" && Obj ! ...