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

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

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

《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
下一篇 2019年11月23日 上午11:22

99%的人还看了以下文章

  • 会移动的文字 marquee标签(入门到高级) 网页制作

    会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦，我会移动耶！ </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    江山如画的头像 江山如画
    2018年7月30日
    6.6K0

  • HTML5- Canvas入门（二）画线并设置颜色

    HTML5- Canvas入门（一）画线 上一节课我们学会了 Canvas画线，绘制了一条黑色的直线，但如果我们想要绘制一条红色的或者其它颜色的线段，该怎么做呢？ 答案很简单，使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧： <canvas id=”myCanvas” width=”200″ height=”200″ s…

    江山如画的头像 江山如画
    2022年7月10日 • 网页制作
    9.5K0
  • html入门教程 网页制作

    第11课：表格的高级特性

    表格还有哪些相关属性？ colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span（跨列）”的缩写。colspan属性用在<td>标签中，用来指定单元格横向跨越的列数： 例1： <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    江山如画的头像 江山如画
    2018年1月19日
    6.0K0
  • vue学习v-on:click绑定HTML的单击事件 网页制作

    vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    江山如画的头像 江山如画
    2020年6月14日
    6.5K0
  • html入门教程 网页制作

    第12课：页面布局（CSS）

    如何为页面实现理想的布局？ 你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网…

    江山如画的头像 江山如画
    2018年1月19日
    9.0K0
  • html入门教程 网页制作

    第10课：表格

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

    江山如画的头像 江山如画
    2018年1月19日
    6.0K0

发表回复

登录后才能评论