Html5在网页中引入视频音频的方法
1.<video> 标签定义视频,比如电影片段或其他视频流。
一段简单的 HTML5 视频:
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
controls 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

当前,video 元素支持三种视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
实例
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
注:video标签控制视频画面尺寸方法:
可以在video标签外面加一个父盒子,让video标签充满父元素(在video标签内加上属性style=“width:100%;height:100%;object-fit: fill”),通过控制父元素的大小来调整视频画面尺寸。
谷歌浏览器下MP4视频格式必须为H.264编码格式的才可以播放!
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
2.HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
如需在 HTML5 中播放音频,您所有需要的是:
<audio src="song.ogg" controls="controls">您的浏览器不支持 audio 标签。</audio>
control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
<audio> 标签的属性

当前,audio 元素支持三种音频格式:

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
实例
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
Html5在网页中引入视频音频的方法的更多相关文章
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- php include,require 主要是向网页中引入文件
- 网页中显示pdf的方法
非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...
- vue-cli中引入jquery的方法
vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...
- SSM项目 以及 springboot 中引入swagger2的方法
swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...
- .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
- 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法
在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...
随机推荐
- 项目二:企业级java电商网站开发(服务端)
声明:项目源于网络,支持正版教程,学习使用,仅记录在此 项目介绍 企业级java电商网站开发(服务端),模块划分:用户管理,商品管理,商品品类管理,订单管理,订单详情管理,购物车管理,收货地址管理,支 ...
- Jmeter Json List Element Assertion使用详解
使用背景: jmeter4.0本身提供json Assertion断言,但当我们想要对返回的json list中的多个字段进行断言的时候,我们就会感到很无力.那么此时我们就可以通过Json List ...
- 洛谷NOIp热身赛 T2123 数列游戏
题目背景 此题为改编题,特别鸣谢倪星宇同学. 有一次,HKE和LJC在玩一个游戏. 题目描述 游戏的规则是这样的:LJC在纸上写下两个长度均为N的数列A和B,两个数列一一对应.HKE每次可以找两个相邻 ...
- 用 Python 爬取网易严选妹子内衣信息,探究妹纸们的偏好
网易商品评论爬取 分析网页 评论分析 进入到网易精选官网,搜索“文胸”后,先随便点进一个商品. 在商品页面,打开 Chrome 的控制台,切换至 Network 页,再把商品页Python入门到精通学 ...
- python程序调用C/C++代码
这篇用来记录在些模拟Canoe生成CAN数据桢工具时遇到的问题, 生成CAN数据桢,主要分为两个关注点: 1.如何从can信号名获取到can信号的ID长度以及信号的起始位,并将信号值按照一定的规则填写 ...
- unittest中diascover批量执行用例
# case_dir='./'#当前脚本的路径 # discover=unittest.defaultTestLoader.discover(case_dir,pattern='unittest_fr ...
- powershell(一)
Windows powershell是一种命令行外壳程序和脚本环境,它内置在win7以上版本的操作系统中,使命令行用户和脚本编写者可以利用.NET Framework的强大功能.powershell程 ...
- Codeforces 986B - Petr and Permutations
Description\text{Description}Description Given an array a[], swap random 2 number of them for 3n or ...
- B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- sqlserver 查看最耗时的前10个存储过程
SELECT TOP OBJECT_NAME(a.object_id,database_id) SP_Name, DB_NAME(a.database_id) Database_Name, a.cac ...