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在网页中引入视频音频的方法的更多相关文章

  1. HTML中引入CSS的方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...

  2. php include,require 主要是向网页中引入文件

  3. 网页中显示pdf的方法

    非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...

  4. vue-cli中引入jquery的方法

    vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...

  5. SSM项目 以及 springboot 中引入swagger2的方法

    swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...

  6. .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  7. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  8. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  9. 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

随机推荐

  1. 从干将莫邪的故事说起--java比较操作注意要点

    故事背景 <搜神记>: 楚干将.莫邪为楚王作剑,三年乃成.王怒,欲杀之.剑有雌雄.其妻重身当产.夫语妻曰:“吾为王作剑,三年乃成.王怒,往必杀我.汝若生子是男,大,告之曰:‘出户望南山,松 ...

  2. 网络请求中的cookie与set-Cookie的交互模式的一些问题解析

    首先我们需要思考,很多问题. 1.当很多人访问统一个网服务器,服务器如何来区分不同的用户呢? 答:sessionid,sessionid保证了浏览器和服务器唯一性的通信凭证号码,session保存在服 ...

  3. Mac 10.14 安装抓包工具Fiddler

    环境安装 第一步: 首先,Mac下需要使用.Net编译后的程序,需要用到跨平台的方案Mono(现阶段微软已推出跨平台的方案.Net Core,不过暂时只支持控制台程序).安装程序可以从http://w ...

  4. Kubernetes之Pod介绍

    下图Pod的客户端有两类:其他Pod和集群外的客户端 集群外访问需要通过service提供固定端点访问 service的类型有:ClusterIP.NodePort.LoadBalancer.Exte ...

  5. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  6. RF分层封装

    1.如何管理用例? (1).在ride工具中分层管理用例(案例层.元素层.流程层),提高效率 (2).偶尔运行下,保证脚本能正常跑动 2.用例分层操作 案例层:需要加载流程层.txt资源和Seleni ...

  7. python selenium鼠标滑动操作

    先安装pyautogui: pip install pyautogui #coding=utf-8 import pyautogui from selenium import webdriver fr ...

  8. 初识域渗透利器Empire

    Empire 是一款类似Metasploit 的渗透测试框架,基于python 编写,Empire是一个纯粹的PowerShell 后开发代理,建立在密码安全通信和灵活的架构上.Empire 实现了无 ...

  9. linux-查看服务器内存使用情况(free top)

    free命令:显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存. [root@ipha-dev71- workspace]# free # kb total used ...

  10. 17.Linux高可用之Keepalived

    1.什么是高可用,为什么要设计高可用? 两台机器启动着相同的业务系统,当有一台机器宕机,另外一台服务器能快速的接管,对于访问的用户是无感知的. 减少系统不能提供服务的时间. 2.高可用使用什么工具来实 ...