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属性,视频在就绪后马上播放。




html5视频教程



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

  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.6K0
  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    1.4K0
  • 纯JS实现的验证码-可自定义长度和字符

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

    2018年10月9日
    2.4K0
  • css布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    2.4K0
  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    3.2K0
  • 6个实例教你学会JavaScript的箭头函数

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

    2018年2月17日
    2.0K0

发表回复

登录后才能评论