一、上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码

<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标签及其属性的更多相关文章

  1. HTML5 audio与video标签实现视频播放,音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  2. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  3. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  4. H5 video标签的属性

    35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...

  5. video标签常用属性及说明

    video标签常用属性(在标签内部使用) video常用API属性及方法(API属性是供JS调用的,不在video标签元素中直接使用)

  6. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  7. HTML中的<audio>和<video>标签讲解

    关于<audio>标签讲解:点击这里 这里来一段简单的html5的音频代码: <audio src="someaudio.wav"> 您的浏览器不支持 au ...

  8. 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  9. audio和video元素

    目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...

随机推荐

  1. golang 执行命令行(二)--修改进程启动用户

    继续上文所述,有时候我们需要设置进程的启动用户,操作与设置进程组的方式类似,不多说直接上代码: // 修改进程的执行用户 func withUserAttr(cmd *exec.Cmd, name s ...

  2. [洛谷P5323][BJOI2019]光线

    题目大意:有$n$层玻璃,每层玻璃会让$a\%$的光通过,并把$b\%$的光反射.有一束光从左向右射过,问多少的光可以透过这$n$层玻璃 题解:事实上会发现,可以把连续的几层玻璃合成一层玻璃,但是要注 ...

  3. C# vb .net实现gamma伽玛调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的gamma伽玛调整特效滤镜呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: ...

  4. Spring中ApplicationContextAware的作用

    ApplicationContextAware 通过它Spring容器会自动把上下文环境对象调用ApplicationContextAware接口中的setApplicationContext方法. ...

  5. 封装的PKPM BimView的方法

    封装的方法 var ObvApiWrapper; if (!ObvApiWrapper) { ObvApiWrapper = {}; } ObvApiWrapper = function(build, ...

  6. 在SQL Server中,为何都建议禁止 VIA 协议,VIA协议具体内容是什么?

    在SQL Server 在SQL Server中,为何都建议禁止 VIA 协议,VIA协议具体内容是什么? 中,为何都建议禁止 VIA 协议,VIA协议具体内容是什么? 在SQL Server中,为何 ...

  7. 有关mysql的utf8和utf8mb4,以及Illegal mix of collations for operation 'like'

    参考以下几个帖子: https://www.cnblogs.com/install/p/4417527.html https://blog.csdn.net/Yetmoon/article/detai ...

  8. iOS应用状态保存和恢复

    当应用被后台Kill掉的时候希望从后台返回的时候显示进入后台之前的内容 在Appdelegate中设置 - (BOOL)application:(UIApplication *)application ...

  9. 从零开始学虚拟DOM

    此文主要翻译自:Building a Simple Virtual DOM from Scratch,看原文的同学请直达! 此文是作者在一次现场编程演讲时现场所做的,有关演讲的相关资料我们也可以在原英 ...

  10. ORACLE 清理SYSAUX表空间

    在数据库检查中发现SYSAUX表空间占用过大,SYSAUX是ORACLE10G开始提供的功能,用于数据库为SYSTEM表空间减负. 用以下语句查出相应的表空间值 select a.tablespace ...