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
seoer、站长-6个方面检测你是否走火入魔
下一篇 2019年11月23日 上午11:22

99%的人还看了以下文章

  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    4.8K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    9.6K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    20.0K1
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    10.3K0
  • 如何单独设置打印网页的样式

    做项目,有些网页需要打印,很多时候,是导出WORD或EXCEL再打印。 现在需要页面直接打印,方便没有安装OFFICE的用户。 需求:页面在浏览器中浏览是一种样式,要打印这个页面,是另一种样式。 解决方法:用link标签中的media属性解决此问题。 <link href=”stylesheets/print.css” media=”print” re…

    2019年2月15日
    3.7K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    3.3K0

发表回复

登录后才能评论