HTML插入音频和视频:audio和video标签及其属性
一、上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTg1MjAzMTUwMA==' frameborder=0 'allowfullscreen'></iframe>
二、audio 标签定义声音,比如音乐或其他音频流。
1.audio支持三种音频格式ogg、mp3、wav,为了兼容性考虑,一般会引入其中的两种格式
2.属性:
autoplay 如果出现该属性,则音频在就绪后马上播放。(注:可以autoplay=“autoplay”这种写法,也可以直接写autoplay)
controls 如果出现该属性,则向用户显示控件,比如播放按钮。(注:可以controls=“controls”这种写法,也可以直接写controls)
loop 如果出现该属性,则每当音频结束时重新开始播放。(注:可以loop=“loop”这种写法,也可以直接写loop)
preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。(load、auto、meta、none)
src 要播放的音频的 URL。(可以和列子一样的写法,引入source单标签)
3.下面是在Firefox浏览器的显示风格,其他浏览器显示风格不一样,可以通过css统一格式
4.可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
<audio controls autoplay loop>
<source src="/i/horse.ogg">
<source src="/i/horse.mp3">
<source src="/i/horse.wav">
您的浏览器不支持 video 标签!
</audio>

三、<video> 标签定义视频,比如电影片段或其他视频流。
1.video支持三种音频格式ogg、mp4、webm,为了兼容性考虑,一般会引入其中的两种格式
2.属性:
autoplay 如果出现该属性,则视频在就绪后马上播放。(注:可以autoplay=“autoplay”这种写法,也可以直接写autoplay)
controls 如果出现该属性,则向用户显示控件,比如播放按钮。(注:可以controls=“controls”这种写法,也可以直接写controls)
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。(注:可以loop=“loop”这种写法,也可以直接写loop)
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。(load、auto、meta、none)
src要播放的视频的 URL。(可以和列子一样的写法,引入source单标签)
width和height 设置视频播放器的宽度和高度。
3.下面是在Firefox浏览器的显示风格,其他浏览器显示风格不一样,可以通过css统一格式
4.可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
<video controls autoplay loop>
<source src="/i/movie.ogg">
<source src="/i/movie.mp4">
<source src="/i/movie.webm">
您的浏览器不支持 video 标签!
</video>

HTML插入音频和视频:audio和video标签及其属性的更多相关文章
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- video标签的属性和方法总结
最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- H5 video标签的属性
35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...
- video标签常用属性及说明
video标签常用属性(在标签内部使用) video常用API属性及方法(API属性是供JS调用的,不在video标签元素中直接使用)
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- HTML中的<audio>和<video>标签讲解
关于<audio>标签讲解:点击这里 这里来一段简单的html5的音频代码: <audio src="someaudio.wav"> 您的浏览器不支持 au ...
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- audio和video元素
目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...
随机推荐
- go 基本IO接口
package main import ( "fmt" "io" "strings" ) func ReadFrom(reader io.R ...
- SpringBoot--对SpirngMVC的自动配置
SpringBoot对SpringMVC提供了许多自动配置 Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver b ...
- 2.9_Database Interface ADO结构组成及连接方式实例
说通俗点OLE DB和ODBC都是最底层的东西,而ADO对象给我们提供了一个“可视化”和应用层直接交互的组件,ADO对象T通过OLE DB间接取得数据库中的数据,如下图: 从上面看出,可以说ADO是应 ...
- cocoaPods升级遇到的问题 升级ruby 升级cocoaPos
最近重复了一次,修复一些更改. 1.查询 rvm版本rvm -v 2.查询ruby版本ruby -v 3.查询 gem 版本gem -v 4.查询ruby 镜像gem sources -l 5.升级r ...
- 【转载】 C#中List集合使用InsertRange方法在指定的位置插入另一个list集合
在C#的List集合操作过程中,如果在集合中的某个位置插入一个新的元素对象,可以使用Insert方法进行操作.其实List集合也提供了在特定的位置插入另一个集合,然后另一个集合的数据整个写入到当前集合 ...
- springboot+security整合(1)
说明 springboot 版本 2.0.3源码地址:点击跳转 系列 springboot+security 整合(1) springboot+security 整合(2) springboot+se ...
- 用Visual Studio 2015 编写 MASM 汇编程序(二)从头开发一个Win32汇编程序
一,建立一个VC的控制台类型的空工程: 1,从VS菜单中选择“文件”->“新建”->“项目”. 2,在新建项目中选择:“Visual c++”->"Win32"- ...
- python图片二值化提高识别率
import cv2from PIL import Imagefrom pytesseract import pytesseractfrom PIL import ImageEnhanceimport ...
- RedisCluster的rename机制失败报错,解决又是数据倾斜问题
需求说明:spring session中的用户session更新是更新key的名字,所以对于key的操作时需要用newkey 替换oldkey value值只允许存在一个,这里用到rename就很合适 ...
- 关于maven中版本控制问题
之前我们说过Maven的版本分为快照和稳定版本,快照版本使用在开发的过程中,方便于团队内部交流学习.而所说的稳定版本,理想状态下是项目到了某个比较稳定的状态,这个稳定包含了源代码和构建都要稳定. ma ...