展示视频

视频

<video width="" height="" controls="controls">

            <source src="movie.mp4" type="video/mp4"></source>

            <source src="movie.ogv" type="video/ogg"></source>

            <source src="movie.webm" type="video/webm"></source>

            <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">

                <param name="movie" value="myvideo.swf" />

                <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />

            </object>

            当前浏览器不支持 video直接播放，点击这里下载视频： <a href="movie.webm">下载视频</a>

</video>

运行结果：

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

使用DOM进行控制

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title></title> 

</head>

<body> 

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

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

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

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

  <button onclick="makeNormal()">普通</button>

  <br>

  <video id="video1" width="">

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

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

    您的浏览器不支持 HTML5 video 标签。

  </video>

</div> 

<script>

var myVideo=document.getElementById("video1"); 

function playPause()

{

    if (myVideo.paused)

      myVideo.play();

    else

      myVideo.pause();

} 

    function makeBig()

{

    myVideo.width=;

} 

    function makeSmall()

{

    myVideo.width=;

} 

    function makeNormal()

{

    myVideo.width=;

}

</script> 

</body>

</html>

运行结果：

HTML5-Video视频-基础篇的更多相关文章

  1. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  2. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  3. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  4. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  5. 让所有浏览器支持HTML5 video视频标签

    HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...

  6. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  7. HTML5 video视频字幕的使用和制作

    一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.oper ...

  8. HTML5 canvas之基础篇（一）

    一.检测浏览器是否支持canvas if( !canvas || !canvas.getContext){ return; } 也可以使用modernizr.js库,Modernizr是一个易用的轻量 ...

  9. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

随机推荐

  1. 高并发下的Id生成器

    考虑到sql server以及c#,最多只能用decimal类型,也就是29位的数字,做了下面这个数字型id生成器: class Program { static void Main(string[] ...

  2. java 浅克隆 深克隆

    对象的克隆是java的一项高级技术,他可以根据给定的对象,获得与其完全相同的另一个对象. 1.浅克隆主要是复制对象的值 2.深克隆:当类存在聚合关系的时候,克隆就必须考虑聚合对象的克隆,可以复制引用类 ...

  3. CodeForces 550E Brackets in Implications 推理

    给出一个四个规则 0->0=1  0->1=1 1->0=0  1->1=0 我自己当时一味的去找规律,没有把式子好好推一推. 当然每个人都能想到a[n]=0是必须的 当a[n ...

  4. Spectral Bounds for Sparse PCA: Exact and Greedy Algorithms[贪婪算法选特征]

    目录 概括 Sparse PCA Formulation 非常普遍的问题 Optimality Conditions Eigenvalue Bounds 算法 代码 概括 这篇论文,不像以往的那些论文 ...

  5. JVM原理分析

    1 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.由一套字节码指令集.一组寄存器.一个栈.一个垃圾回收 ...

  6. vue: WebStorm设置快速编译运行

    WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步 点击启动快捷按 ...

  7. mysql备份（导出）数据库，并恢复数据

    导出某个数据库数据到文件中 假设要导出test这个数据库,那么可以在Linux命令行(不是在mysql中) [root@ubuntu /data]# mysqldump -uroot -p test ...

  8. linux和sqlserver 2017的安装

    这两天一直在弄linux的安装过程.中间也遇到了不少的坑,主要是网络上的坑人的文章太多.都是坑,最后从redhat官网下载了iso文件,顺便看到官网推荐了一个fedora media writer的烤 ...

  9. Laravel设置软删除及其恢复系列操作

    软删除及其相关实现 在模型类中要使用SoftDeletestrait并设置$date属性数组 <?php namespace App\Models; use Illuminate\Databas ...

  10. 4面向对象（OOP）

    学习线路 初学: 熟悉语法 进阶: 1.23种设计模式 2.6中开发原则 高级: 1.优化 2.架构 3.安全 概念 类:一类具有相同特性的事物的抽象描述,用一个java类表示. 成员变量:抽取的属性 ...