投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

HTML5网页中如何嵌入音频，视频？

江山如画 • • 网页制作 • 阅读 5745

《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)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
狮瞳唯美可爱人像摄影欣赏-棉花甜心
上一篇 2019年11月22日 下午1:09
seoer、站长-6个方面检测你是否走火入魔
下一篇 2019年11月23日 上午11:22

99%的人还看了以下文章

  • html入门教程 网页制作

    第10课：表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗？ 对于初学者来说，在HTML中创建表格似乎比较复杂，不过只要耐心细致地观察，你就会发现表格实际上与其它HTML元素相似，也具有严格的逻辑结构。 例1： <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    江山如画的头像 江山如画
    2018年1月19日
    7.1K0
  • js 网页制作

    js实现两个页面表单传值并接收

    网页制作时，需要两个页面之间传值，通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面： <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    江山如画的头像 江山如画
    2019年7月10日
    5.7K0
  • html5专题 网页制作

    跟永哥学HTML5（4）：正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签，并举例给出如何使用。但真正从HTML4转变到HTML5编程，并不是那么简单的事情，很多初学者没有真正了解这些标签，或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    江山如画的头像 江山如画
    2018年2月3日
    7.6K0
  • CSS制作简洁的栏目/标题样式 网页制作

    CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    江山如画的头像 江山如画
    2019年1月5日
    9.2K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹) 网页制作

    网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果，今天分享给大家！ <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    江山如画的头像 江山如画
    2022年5月9日
    8.2K0
  • 导航特效：jquery实现当前（活动）菜单样式变化 网页制作

    导航特效：jquery实现当前（活动）菜单样式变化

    用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。 当前（活动）菜单样式变化实现原理 在html代码中给首页（默认选中）加上class名cur <a href=…

    江山如画的头像 江山如画
    2018年2月8日
    7.7K0

发表回复

登录后才能评论