`
zhangyaochun
  • 浏览: 2621254 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html5之Video事件api探究

阅读更多

前面已经简单地介绍了一下video标签的相关知识:http://zhangyaochun.iteye.com/blog/1473888

 

下面我们看看这个video其他相关的东东。

 

1、HTMLVideoElement对象:

 

 

<video id="test" loop="loop" src="" ></video>

 

获取这个对象的方式其实和其他是一样的:

 

 

var video = document.getElementById("test");

 

2、方法和属性:

 

 

  • canPlayType(type)    --------- 是否能播放某种格式的资源
  • load()                         --------重新加载src指定的资源
  • networkState             --------(只读)返回媒介的网络状态
           0 -----未初始化
           1 ------加载完成
           2 ------加载中
           3 ------加载失败

  • error属性                    ---------(只读) 返回当前的错误状态,如果没有,返回null
           error.code返回的是错误状态:

            1-------------获取异常
            2-------------网络错误
            3-------------媒体解码错误
            4-------------格式不支持

  • duration属性              --------- 返回文件总的播放时间
  • volume属性                --------- 返回当前的音量值,在0~1之间
           0 -------静音
           1 -------最大音量


  • muted属性                 ---------- 返回true | false 
         true ----------- 没有开启静音
         false -----------开启静音                                   


  • currentTime             ---------- 返回当前播放的位置

  • ended属性                 ---------- 返回true | false  
        true ------------已经播放完成
        false------------未播放完成 

  • play()  -------播放视频
          会将paused的值置为false
  • pause() -----暂停视频
          会将paused的值置为true




扩展阅读:

1
0
分享到:
评论

相关推荐

    HTML5坦克大战网页版.zip

    Canvas是HTML5中的一个绘图元素,通过JavaScript API进行操作。开发者可以通过JavaScript调用Canvas的绘图方法,如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等,实现动态图形的绘制。在...

    HTML5抽奖页面16.rar

    HTML5抽奖页面是一种基于Web技术实现的互动式用户体验,它结合了HTML5的新特性,如Canvas、SVG、Audio、Video以及离线存储等,为用户提供了丰富的视觉效果和交互体验。这个"HTML5抽奖页面16.rar"压缩包很可能是包含...

    H5小游戏源码 我是你的小苹果.zip

    HTML5作为现代网页开发的核心,提供了许多新的API和元素,如Canvas用于绘制图形,Audio和Video用于媒体播放,Web Storage和IndexedDB用于本地数据存储,WebSocket实现实时双向通信,使得H5小游戏在功能和性能上都有...

    4S店汽车维修租赁单页HTML5网站源码.zip

    1. **HTML5技术**:HTML5是现代网页开发的基础,其新特性包括语义化标签(如、、等),媒体元素(如、&lt;video&gt;),离线存储(Application Cache),以及更强大的表单控件等。了解这些特性对于理解源码的工作原理至关...

    Sora AI Video Preview Case Sora AI 视频模版项目,React全栈快速部署.zip

    【Sora AI 视频模版项目概述】 Sora AI Video Preview Case 是一个基于人工智能...理解这些基本概念和文件结构,有助于深入探究Sora AI Video Preview Case的实现原理和工作流程,为后续的开发、调试或扩展提供基础。

    vip-video-frame

    为了实现“vip-video-frame”的特性,开发者可能利用JavaScript库如Video.js、 Plyr 或 JW Player,这些库提供了丰富的API和自定义选项,可以定制视频播放器的外观和功能。例如,通过JavaScript,我们可以获取视频帧...

    html-css:HTML5和CSS3课程将教您如何使用最新版本的超文本标记语言(HTML)和级联样式表(CSS)创建网站

    3. **多媒体支持**:HTML5原生支持音频()和视频(&lt;video&gt;)元素,无需插件即可播放多媒体内容。 4. **Canvas和SVG**:Canvas提供了一个可编程的画布,可以用于动态图形和动画。SVG(Scalable Vector Graphics)则...

    前台模板60套

    3. **拖放功能**:HTML5提供了拖放API,允许用户在网页中直接拖放元素,无需复杂的JavaScript实现。 4. **媒体元素**:和&lt;video&gt;标签让嵌入音频和视频变得简单,同时支持多种编码格式,如MP3、AAC和WebM。 5. **...

    sakuga-video.github.io:sakuga.video主页

    【sakuga-video.github.io:sakuga.video主页】是一个在线...通过深入探究sakuga-video.github.io项目,开发者不仅可以提升JavaScript相关的技能,还能增强对Web开发全栈的理解,以及如何构建和维护一个开源项目的经验。

    HTM11.0源代码

    HTML11.0源代码是针对网页开发领域的一项重要资源,尤其对于那些深入探究多视点视频编解码技术的开发者来说,这是一个极具价值的学习材料。在这个版本中,HTML(超文本标记语言)进行了更新和扩展,以支持更多高级...

    spacesucks:常规视频游戏[HTML5,CSS3,JAVASCRIPT,CANVAS]

    "spacesucks"是一款基于HTML5、CSS3和JavaScript技术开发的常规视频游戏,利用了Canvas API来实现游戏的图形渲染。这款名为“太空鸭”的游戏,展示了Web开发中的交互式内容制作能力,让玩家在浏览器中体验游戏的乐趣...

    Bloglaza1.gaRR24n

    此外,文件还可能涉及HTML5的新API,比如离线存储(离线Web应用程序)、Geolocation API(获取设备位置)、Web Storage(替代cookies提供更大的存储空间)等。这些API为开发者提供了更多功能,使得网页应用可以实现...

    behance:行为克隆| 学术项目

    4. **HTML5新特性**:HTML5引入了许多新的元素和API,如`&lt;canvas&gt;`用于图形绘制,`&lt;audio&gt;`和`&lt;video&gt;`用于多媒体播放,以及`&lt;section&gt;`、`&lt;article&gt;`等语义化元素,这些都可能在行为克隆项目中发挥作用。...

    CodeGym

    9. **Web API**:探究HTML5引入的新的JavaScript API,如Geolocation API(获取用户位置)、WebSocket(实时双向通信)和Web Storage(替代cookie的本地存储)。 通过CodeGym的课程,你不仅会学习到这些理论知识,...

    科拉维塔

    5. **HTML5新特性**: HTML5引入了许多新元素和API,如`&lt;canvas&gt;`用于画布绘图,`&lt;video&gt;`和`&lt;audio&gt;`用于多媒体播放,以及离线存储(`&lt;applicationCache&gt;`)等功能。 6. **响应式设计**: 随着移动设备的普及,HTML5...

    experiment

    1. **HTML5新特性**:HTML5引入了许多新元素和功能,如`&lt;canvas&gt;`用于绘制图形,`&lt;video&gt;`和`&lt;audio&gt;`用于多媒体播放,`&lt;section&gt;`、`&lt;article&gt;`和`&lt;header&gt;`等语义化标签用于提高内容的可读性和可访问性。...

    Ukagaka

    3. **HTML5的新特性**:如`canvas`用于图形绘制,`audio`和`video`元素用于多媒体播放,`section`,`article`等语义化标签用于提升网页可读性和SEO。 4. **CSS(Cascading Style Sheets)**:与HTML结合使用,用于...

    goit-markup-hw-07:加

    HTML5引入了许多新元素和API,如`&lt;video&gt;`和`&lt;audio&gt;`用于多媒体播放,`&lt;canvas&gt;`支持图形绘制,`&lt;form&gt;`元素的新属性增强了表单处理,`&lt;section&gt;`、`&lt;article&gt;`等元素增强了语义化。 通过学习和理解以上知识点,...

    Assignment-2

    **HTML5新特性**:HTML5引入了更多语义化标签(如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;article&gt;`、`&lt;section&gt;`),增强了离线存储(`&lt;application cache&gt;`)、拖放功能、画布(`&lt;canvas&gt;`)、SVG图形和Web Audio/Video API。...

    Fynd

    3. **HTML5新特性**:HTML5引入了许多新的元素和API,如`&lt;canvas&gt;`用于图形绘制,`&lt;video&gt;`和`&lt;audio&gt;`用于媒体播放,`&lt;section&gt;`和`&lt;article&gt;`帮助更好地组织内容,以及Web存储和Web Workers等。 4. **CSS...

Global site tag (gtag.js) - Google Analytics