课程免费试听
新川教育
暑期班开班啦!学费大优惠中!仅限前20名.
教学方式任选:1.面授;2.远程在线教育;
如何在浏览器中显示插入的HTML5视频/音频《HTML5系列教程13》

来源:新川教育 阅读数:1929
添加时间:2017-4-19   类别:网页设计教程

如何在浏览器中显示插入的HTML5视频/音频《HTML5系列教程13》

HTML5系列教程13

    在本篇文章中我们将介绍如何在浏览器中显示插入的HTML5视频/音频。不过在这之前,我们要先了解web视频的标准和格式再检测浏览器是否支持HTML5视频,同时我们还要了解视频/音频元素支持的格式有哪些。让我们一起来了解一下吧!


1.web视频的标准与格式

    在HTML5中,规定了通过video元素和audio元素来包含视频和音频的标准方法,只要是支持HTML5的浏览器就能够实现播放视频和音频。

    video(视频)元素支持Ogg、MPEG4以及WebM三种格式;audio(音频)元素支持Ogg Vorbis、MP3和WAV格式。由于各浏览器对HTML5支持的程度不同,所以不同的浏览器的不同版本对video元素和audio元素的支持程度也不同。不过在HTML4中因为大多数的视频和音频都是通过插件来显示的,这需要浏览器安装相同的浏览器才能播放。

    在上述的几种格式中,ogg格式表示带有视频编码Theora和vorbis音频编码的ogg文件,MPEG4表示带有H.264视频编码和ACC音频编码的MPEG4文件,webM表示带有VP8视频编码和vorbis音频编码的webM文件。


2.video/audio元素概述

    video元素用于在HTML5中播放视频文件,audio元素用于在HTML5中播放音频文件,这两个元素都有一个SRC和controls属性,其中SRC属性用于指定文件的地址,controls属性提供一个用于播放、暂停、音量、播放进度条、播放时间和是否全屏的控件,开始和结束标签之间的文字用于表示当浏览器不支持时需要显示的内容。

    在HTML5中播放音频的代码如下图所示:

HTML5中的音频元素

    在HTML5中播放视频的代码如下图所示:

HTML5中的视频元素


3.检测浏览器是否支持HTML5视频

    目前可供选择的浏览器还是非常多的,而且不同浏览器的不同版本对HTML5视频的支持也不尽相同,如何才能知道使用的浏览器是否支持HTML5的视频播放呢?下面将会介绍如何检测浏览器是否支持HTML5视频的方式。

    首先新建一个HTML5文档,将下图中的代码写到HTML5文档中,再用浏览器打开这个文档,单击检测按钮即可知道浏览器是否支持HTML5视频播放。

检测浏览器是否支持HTML5视频

在HTML5中显示视频/音频

    下面我们通过一个简单的实例来认识一下HTML5中音视频的使用方法。我们首先在web页面加载一个视频文件,页面启动后开始循环播放该视频。这个实例的图片代码如下图所示:

在HTML5中显示视频/音频

在HTML5中显示视频/音频


    好了,本次的如何在浏览器中显示插入的HTML5视频/音频到这里了,下一篇中我们将会深入了解audio(音频)元素和video(视频)元素。了解更多资讯请加我们的官方微信:pyyuanxing。谢谢大家的观看。祝大家身体健康、生活愉快。

培训教程公众号 
扫描左图添加公众号,海量视频教程免费学.
教学任选:1.面授;2.远程教学;
暑期班火热招生中!提交电话,获取最少200元优惠.

      友情链接

  1. 办公文秘
  2. 关于我们
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6