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

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

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

《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%的人还看了以下文章

  • 手把手，永哥教你学会css sprite（雪碧图）技术 网页制作

    手把手，永哥教你学会css sprite（雪碧图）技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点： 有效减少网站的http请求数量，加…

    江山如画的头像 江山如画
    2018年2月20日
    14.2K0
  • 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日
    7.7K0
  • CSS制作三行二列居中布局，高度自适应 网页制作

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

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

    江山如画的头像 江山如画
    2018年7月29日
    7.4K0
  • 纯CSS3制作的垂直手风琴效果，点击标题展开详细介绍 网页制作

    纯CSS3制作的垂直手风琴效果，点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码： @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    江山如画的头像 江山如画
    2018年12月26日
    9.5K0

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

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

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

    江山如画的头像 江山如画
    2022年7月10日 • 网页制作
    12.0K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type) 网页制作

    菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。 如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…

    江山如画的头像 江山如画
    2018年9月27日
    4.2K0

发表回复

登录后才能评论