HTML5的视频播放控制技术

介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。

近年来,网络视频和音频变得越来越流行,YouTube,Viddler等网站的视频服务使人更容易发布视频和音频。然而,由于 HTML目前缺乏必要手段成功地嵌入和控制多媒体本身,许多网站都依赖Flash提供该功能。虽然可以嵌入多媒体使用各种插件(如QuickTime,Windows媒体等等),Flash是目前唯一被广泛部署插件,它为开发人员提供了一个跨浏览器兼容的解决方案。

HTML5的video和 audio元素使视频播放控制更容易,大部分的api两个元素之间共享。

当前,video 元素支持三种视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

html5视频video

HTML5的视频播放,最简单的方法是使用嵌入视频 video元素

<video src="mov.mp4" controls="controls">
</video>

controls属性供添加播放、暂停和音量、全屏控制控件。
再加上宽度和高度属性width=”300″ height=”240″ 和autoplay属性,视频在就绪后马上播放。

Tips:You can change the code before run.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>html5视频教程</title> 
</head> 
<body><video src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls width="300" height="240" autoplay> 
</video> 
</body> 
</html>

html5中视频控制属性:

Autoplay Autoplay 如果指定,视频会在准备好(如已取得可播放视频)后自动播放.
Controls Controls 添加播放控制及音量控制功能栏.
Height Pixels 指定播放器的高度,以pixel为单位.
Loop Loop 如果指定,视频将重复播放.
Poster url 指定视频的预览图.
Preload Preload 如果指定,视频会在加页面加载过程中被加载。当Autoplay被指定时,会被忽略。
Src url 目标视频的URL.
Width Pixels 指定播放器的宽度,以pixel为单位.

当浏览器不支持video标签时显示提示信息。

<video src="video.mp4"width="320"height="240"autoplay controls loop>
你的浏览器不支持HTML5,太落后了!!
</video>

如果无法确定目标浏览器是否能支持<video>或者你的视频格式,我们可以提供多个格式的视频文件,并给用户友好的提示。如下所示:

<video controls>
     <sourcesrc="video1.mp4"/>
     <sourcesrc="video1.ogv"/>
     <sourcesrc="video1.webm"/>
     <p>你的浏览器不支持HTML5 视频</p>
</video>

在上面的代码中我们提供了3种格式视频,浏览器将使用第一个可识别的格式。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3847.html

(1)
上一篇 2019年10月15日 上午9:33
下一篇 2019年10月15日 下午9:02

99%的人还看了以下文章

  • 跟永哥学HTML5(6):H5表单及表单验证

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

    2018年2月27日
    2.4K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    6.7K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    1.8K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    3.3K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    7290
  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    560

发表回复

登录后才能评论