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

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

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

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

  • HTML5画布(Canvas)速查表 网页制作

    HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器，必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    江山如画的头像 江山如画
    2018年2月20日
    7.4K0
  • js 网页制作

    JavaScript 向数组的开头或末尾添加元素：unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 unshift() 实例： <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    江山如画的头像 江山如画
    2018年9月5日
    15.4K0
  • 纯CSS制作红色网站二级下拉导航菜单 网页制作

    纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单，代码非常简洁，适合修改后使用，入门就能掌握。 二级下拉导航菜单HTML代码： <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    江山如画的头像 江山如画
    2019年4月17日
    12.9K0
  • html入门教程 网页制作

    第7课：HTML标签的属性

    许多元素都可以设置属性。 属性是什么？ HTML通过标签告诉浏览器如何展示网页（比如告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例1： <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    江山如画的头像 江山如画
    2018年1月20日
    3.4K0
  • 跟永哥学HTML5（6）：H5表单及表单验证 网页制作

    跟永哥学HTML5（6）：H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式，而不使用任何JavaScript。

    江山如画的头像 江山如画
    2018年2月27日
    8.1K0
  • 第6课：超链接 网页制作

    第6课：超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。

    江山如画的头像 江山如画
    2020年2月22日
    2.7K0

发表回复

登录后才能评论