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

  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    5.5K0
  • 纯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日
    3.9K0
  • 跟永哥学HTML5(2):html5与html4的区别

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

    2018年1月21日
    3.1K0
  • PS图片转页面CSS+HTML的步骤

    标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。

    网页制作 2020年2月12日
    6.1K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    2.9K0
  • 第7课:HTML标签的属性

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

    2018年1月20日
    3.1K0

发表回复

登录后才能评论