<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><!--      当前,video 元素支持三种视频格式:格式        IE      Firefox    Opera    Chrome    SafariOgg         No      3.5+       10.5+     5.0+      NoMPEG4     9.0+     No         No        5.0+     3.0+WebM        No      4.0+       10.6+     6.0+      NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件--><!-- controls 让浏览器显示视频中的元素--><video controls="controls" autoplay="autoplay" loop="loop" id="video1"><source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen and (min-width:500px) " /><!--宽度小于500播放下面这个--><source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen" />Sorry,your browser is unable to play this video.</video><section><button onclick="playPause()">播放/暂停</button><button onclick="makeBig()">大</button><button onclick="makeNormal()">中</button><button onclick="makeSmall()">小</button></section><script type="text/javascript">var myVideo = document.getElementById("video1");function playPause() {if (myVideo.paused)myVideo.play();elsemyVideo.pause();}function makeBig() {myVideo.width = 560;}function makeSmall() {myVideo.width = 320;}function makeNormal() {myVideo.width = 420;}</script><!--当前,audio 元素支持三种音频格式:IE 9    Firefox 3.5    Opera 10.5    Chrome 3.0    Safari 3.0Ogg Vorbis                     √             √               √     MP3                  √                                       √              √Wav                            √             √                              √--><audio src="http://www.w3school.com.cn/i/song.mp3" controls="controls" autoplay="autoplay">Your browser does not support the audio tag.</audio>
</body>
</html>

转载于:https://www.cnblogs.com/yxlblogs/p/3891679.html

HTML5学习之视频与音频(三)相关推荐

  1. 基于深度学习的视频检测(三) 目标跟踪

    搭建环境 Ubuntu16.04+CUDA9+cudnn7+python3.5+源码编译Tensorflow1.4+opencv3.3 基于 darkflow (yolo-v2)和 sort/deep ...

  2. 深度学习赋能视频编码

    深度学习赋予了诸如计算机视觉等领域新的研究契机,其应用也获得了视频编码领域的诸多关注.在LiveVideoStack线上分享中北京大学信息技术学院 助理研究员王苫社详细介绍了当下深度学习在视频编码中的 ...

  3. 用计算机进行运算视频,小新计算器,即是好用的计算器,又是私密图片、视频、音频保险箱...

    大家好,最近发现一款完美隐藏私密文件的APP,有了它顿时感觉神清气爽,再也不担心私密的东西没地方存放了,那种看了就得闪有特别不舍得感觉终于不再有了.同时它还是一个很好用的计算器,基本实现了小明计算器的 ...

  4. HTML入门学习 -- HTML5 视频与音频

    HTML5教程参见 http://www.w3school.com.cn/html5/index.asp HTML5对视频音频提供了原生支持,对图形图像也大大加强(除了IE10明确不支持WebGL以外 ...

  5. Html5学习进阶一 视频和音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式:   Internet Explorer Firefox 3.5 Opera 10 ...

  6. HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...

  7. HTML5 向网页嵌入视频和音频

    来源 | http://www.fly63.com/article/detial/9503 现在很多网站上都会使用到视频和音频,html5 中提供了展示视频和音频的标签.向网页嵌入视频可以使用 < ...

  8. Android音视频学习系列(五) — 掌握音频基础知识并使用AudioTrack、OpenSL ES渲染PCM数据

    系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...

  9. HTML基础之 HTML5新增视频和音频标签

    HTML5 新增多媒体标签主要包含两个: 音频:audio 视频:video 使用它们可以很方便在页面中嵌入音频和视频,而不再是去使用flash和其它浏览器插件. 视频: video HTML5在不适 ...

最新文章

  1. [JAVA EE]Spring Boot 控制层:参数传递方法
  2. SprimgMVC学习笔记(十)—— 拦截器
  3. shell 删除了hdfs 文件,在HDFS上删除超过10天的文件
  4. java集合概念_JAVA集合概念
  5. react学习(45)----react组件
  6. photoshop CG6 基础知识的学习
  7. 充满生机!UI设计灵感|绿植相关APP界面设计
  8. 互联网人必读 | 大数据思维的十大核心原理
  9. Android开发笔记(十六)秋千摇摆动画SwingAnimation
  10. Atitit.java eval功能的实现  Compiler API
  11. 运维工具之轻量级自动化运维工具Fabric源码安装
  12. gdi win7奔溃_gdiplus.dll 32/64位
  13. Socket bind() error: invalid operands to binary expression
  14. 桃李春风一杯酒,江湖夜雨十年灯。
  15. JVM内存模型-回忆学习总结
  16. Redis升级到 6.x 版本后,12306网站起飞了!
  17. html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
  18. 数据结构 判断括号是否匹配
  19. 新道格会客间 人才引领企业 注入科创源动力
  20. 修改Chrome 默认打开网址

热门文章

  1. BGD-py实现学习【1】[转载]
  2. 大写的“极简” H3C MSG360系列网关
  3. 设计模式-模板方法模式(15)
  4. Android开发者指南(25) —— Resource Types - Style
  5. Nlpir Parser智能语义平台全文搜索
  6. Android批量图片加载经典系列——使用二级缓存、异步网络负载形象
  7. 为什么QQ浏览器不是默认浏览器但是在打开网页的时候还是默认启动?
  8. 《如何更改其他程序ListView控件中某个Item的内容》
  9. LeetCoed 5383. 给 N x 3 网格图涂色的方案数
  10. prim算法 最小生成树