HTML5网页中如何嵌入音频,视频?

HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。

本文主要介绍在HTML5 中如何嵌入音频,视频?

在HTML5 中如何嵌入音频?

HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例:

<audio controls>
<source src="125.mp3" type="audio/mpeg">
   Your browser does’nt support audio embedding feature.
</audio>

HTML5 中如何嵌入视频?

和音频类似,HTML5 支持 MP4、WebM 和 Ogg 格式的视频:

<video width="560"  height="450" controls>    
 <source src="xin126.mp4" type="video/mp4">     
 Your browser does’nt support video embedding feature.  
</video>

HTML5 对于多媒体提供了强有力的支持,除了 audio 和 video 标签外,还支持以下标签:

<embed> 标签定义嵌入的内容,比如插件。

<embed type="video/quicktime" src="Fishing.mov">

<source> 对于定义多个数据源很有用。

<video width="580" height="460" controls>       
 <source src="xin126.mp4" type="video/mp4">       
 <source src="xin126.ogg" type="video/ogg">  
</video>

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

<video width="450" height="340" controls>       
 <source src="xin126.mp4" type="video/mp4">       
 <source src="xin126.ogg" type="video/ogg">       
 <track kind="subtitles" label="English" src="xin126_en.vtt" srclang="en" default></track>        
 <track kind="subtitles" label="Arabic" src="xin126_ar.vtt" srclang="ar"></track>  
</video>

最后分享一款优秀HTML5视频播放器:Sewise Player 提供点播和直播功能演示以及组件下载。

Sewise Player是一款专业的免费网页HTML5视频、流播放器,它功能强大,体积小,跨平台,兼容性好,使用方便简洁。

HTML5网页中如何嵌入音频,视频?

Vod点播演示    源码下载

HTML5网页中如何嵌入音频,视频?

Live直播演示      源码下载

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4358.html

(0)
上一篇 2019年11月22日 下午1:09
下一篇 2019年11月23日 上午11:22

99%的人还看了以下文章

  • CSS制作三行二列居中布局,高度自适应

    本实例要制作三行二列网页布局,这是网页制作中最常见的布局方式,如何使整个页面内容居中,如何使高度适应内容自动伸缩,是本实例中的难点。 <html> <head> <style type="text/css"> body{ background:#999; text-align:center; color…

    2018年7月29日
    2.7K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    1.5K0
  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    3.1K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    1.8K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    1.7K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    3.0K0

发表回复

登录后才能评论