使用HTML5加载音频和视频的实现代码


Posted in HTML / CSS onNovember 30, 2020

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

【二、嵌入视频】

下面是在 Web 页面中嵌入视频文件最简单的形式:

<video src="img/sounds/mu04.mp3"  width="300" height="200" controls>

    Your browser does not support the <video> element.   

</video>

使用HTML5加载音频和视频的实现代码

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。 mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>

<html>

<body>

   <video  width="300" height="200" controls autoplay>

       <source src="img/sounds/3.mp4" type="video/ogg" />

       <source src="img/sounds/3.mp4" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

使用HTML5加载音频和视频的实现代码

【四、嵌入音频】

HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

<audio src="img/sounds/mu04.mp3" controls autoplay>

    Your browser does not support the <audio> element.   

</audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>

<html>

<body>

   <video  width="300" height="200" controls autoplay>

       <source src="img/sounds/mu04.mp3" type="video/ogg" />

       <source src="img/sounds/mu04.mp3" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

使用HTML5加载音频和视频的实现代码

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

使用HTML5加载音频和视频的实现代码

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>

<head>

<script type="text/javascript">

function PlayVideo(){

   var v = document.getElementsByTagName("video")[0];  

   v.play(); 

}

</script>

</head>

<html>

<body>

   <form>

   <video  width="300" height="200" src="img/sounds/3.mp4">

       Your browser does not support the <video> element.

   </video>

   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555

   </form>

</body>

</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

到此这篇关于使用HTML5加载音频和视频的实现代码的文章就介绍到这了,更多相关HTML5加载音频和视频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 #HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 #HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 #HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 #HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 #HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 #HTML / CSS
You might like
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
jQuery中的for循环var与let的区别
2018/04/21 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Django框架验证码用法实例分析
2019/05/10 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
C有"按引用传递"吗
2016/09/06 面试题
2014年保卫部工作总结
2014/11/21 职场文书
小浪底导游词
2015/02/12 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL
golang中的struct操作
2021/11/11 Golang