HTML5学习之视频与音频(三)
<!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学习之视频与音频(三)相关推荐
- 基于深度学习的视频检测(三) 目标跟踪
搭建环境 Ubuntu16.04+CUDA9+cudnn7+python3.5+源码编译Tensorflow1.4+opencv3.3 基于 darkflow (yolo-v2)和 sort/deep ...
- 深度学习赋能视频编码
深度学习赋予了诸如计算机视觉等领域新的研究契机,其应用也获得了视频编码领域的诸多关注.在LiveVideoStack线上分享中北京大学信息技术学院 助理研究员王苫社详细介绍了当下深度学习在视频编码中的 ...
- 用计算机进行运算视频,小新计算器,即是好用的计算器,又是私密图片、视频、音频保险箱...
大家好,最近发现一款完美隐藏私密文件的APP,有了它顿时感觉神清气爽,再也不担心私密的东西没地方存放了,那种看了就得闪有特别不舍得感觉终于不再有了.同时它还是一个很好用的计算器,基本实现了小明计算器的 ...
- HTML入门学习 -- HTML5 视频与音频
HTML5教程参见 http://www.w3school.com.cn/html5/index.asp HTML5对视频音频提供了原生支持,对图形图像也大大加强(除了IE10明确不支持WebGL以外 ...
- Html5学习进阶一 视频和音频
HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式: Internet Explorer Firefox 3.5 Opera 10 ...
- HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
- HTML5 向网页嵌入视频和音频
来源 | http://www.fly63.com/article/detial/9503 现在很多网站上都会使用到视频和音频,html5 中提供了展示视频和音频的标签.向网页嵌入视频可以使用 < ...
- Android音视频学习系列(五) — 掌握音频基础知识并使用AudioTrack、OpenSL ES渲染PCM数据
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...
- HTML基础之 HTML5新增视频和音频标签
HTML5 新增多媒体标签主要包含两个: 音频:audio 视频:video 使用它们可以很方便在页面中嵌入音频和视频,而不再是去使用flash和其它浏览器插件. 视频: video HTML5在不适 ...
最新文章
- [JAVA EE]Spring Boot 控制层:参数传递方法
- SprimgMVC学习笔记(十)—— 拦截器
- shell 删除了hdfs 文件,在HDFS上删除超过10天的文件
- java集合概念_JAVA集合概念
- react学习(45)----react组件
- photoshop CG6 基础知识的学习
- 充满生机!UI设计灵感|绿植相关APP界面设计
- 互联网人必读 | 大数据思维的十大核心原理
- Android开发笔记(十六)秋千摇摆动画SwingAnimation
- Atitit.java eval功能的实现 Compiler API
- 运维工具之轻量级自动化运维工具Fabric源码安装
- gdi win7奔溃_gdiplus.dll 32/64位
- Socket bind() error: invalid operands to binary expression
- 桃李春风一杯酒,江湖夜雨十年灯。
- JVM内存模型-回忆学习总结
- Redis升级到 6.x 版本后,12306网站起飞了!
- html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
- 数据结构 判断括号是否匹配
- 新道格会客间 人才引领企业 注入科创源动力
- 修改Chrome 默认打开网址
热门文章
- BGD-py实现学习【1】[转载]
- 大写的“极简” H3C MSG360系列网关
- 设计模式-模板方法模式(15)
- Android开发者指南(25) —— Resource Types - Style
- Nlpir Parser智能语义平台全文搜索
- Android批量图片加载经典系列——使用二级缓存、异步网络负载形象
- 为什么QQ浏览器不是默认浏览器但是在打开网页的时候还是默认启动?
- 《如何更改其他程序ListView控件中某个Item的内容》
- LeetCoed 5383. 给 N x 3 网格图涂色的方案数
- prim算法 最小生成树