热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5之Video标签的用法

这篇文章给大家分享的是有关HTML5之Video标签的用法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、使用技巧在HT

这篇文章给大家分享的是有关HTML5之Video标签的用法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、使用技巧

在HTML5中可以使用

video标签中有很多属性,例如controls属性可以控制是否有控制台。

  
    浏览器不支持HTML5的视频播放功能  

从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式,这样我们可以采用标签指定多种格式的视频,默认情况下浏览器会自动启动下载文件来确定其类型。

  
      
      

二、Video标签的属性

video标签支持HTML5中的全局属性和事件属性

特有属性如下:

属性            值                    描述

autoplay     autoplay        如果出现该属性,则视频在就绪后马上播放。

controls       controls        如果出现该属性,则向用户显示控件,比如播放按钮。

height         pixels            设置视频播放器的高度。

loop             loop            如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload        preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src    url    要播放的视频的 URL。

width    pixels    设置视频播放器的宽度。

大多数浏览器支持的视频方法、属性事件

方法                   属性                     事件

play()                currentSrc            play

pause()            currentTime          pause

load()                videoWidth         progress

canPlayType    videoHeight         error

duration               timeupdate

ended                   ended

error                     abort

paused                 empty

muted                  emptied

seeking                waiting

volume                loadedmetadata

height

width

注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

三、从实例中了解Video标签的使用

   
   
   
      
        
      播放/暂停   
      大  
      中  
      小  
         
        
          
            
            
          

您的浏览器不支持此HTML5标签

                

                     

HTML5之Video标签的用法

感谢各位的阅读!关于“HTML5之Video标签的用法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


推荐阅读
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址:http:ask.jiutianniao.com ... [详细]
  • HowcanIaligntwoinline-blockssothatoneisleftandtheotherisrightonthesameline?Whyi ... [详细]
  • 本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ... [详细]
  • Skywalking系列博客1安装单机版 Skywalking的快速安装方法
    本文介绍了如何快速安装单机版的Skywalking,包括下载、环境需求和端口检查等步骤。同时提供了百度盘下载地址和查询端口是否被占用的命令。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • Android跨进程通信IPC之9——Binder通信机制
    移步系列Android跨进程通信IPC系列1Android整体架构Android系统架构及系统源码目录Android系统架构 ... [详细]
  • 删除iPad或iPhone目录privatevarkeychainskeychain-2.db文件,重启iPad或iPhone。1.如何卸载机内自带软件? ... [详细]
author-avatar
mobiledu2502934191
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有