HTML5 video 事件应用示例

 1、获取视频时间长度

当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度。

代码如下:

video.onloadedmetadata = function () {
var vLength = video.duration;
console.log(vLength);
}

2、当前视频的播放进度

当视频开始播放时,可以使用 ontimeupdate 事件获取视频当前播放的进度。当video对象的 currentTime 属性发生改变时触发 ontimeupdate 事件。currentTime 属性是浮点小数,可取到 12 位数的小数位数。

代码如下:

video.ontimeupdate = function () {
var vTime = video.currentTime;
console.log(vTime);
}; 

时间: 2024-11-03 10:07:55

HTML5 video 事件应用示例的相关文章

HTML5 Video标签的属性、方法和事件汇总介绍

 HTML5 Video标签的属性.方法和事件汇总介绍 前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器.在这个过程中,对video标签的属性,方法,事件有了个全面的认识.下面分类列出来一下. <video>标签的属性 代码如下: src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度

Webkit中HTML5 Video的实现分析(五) - WebKit中视频事件的传递

HTML的每个元素都可以让JavaScript在某些事件发生时,进行处理.就比如onclick="clickButton()"之类的属性设定. 像下面这篇博客所讲的一样,在WebKit中每个元素都有其对应的JS绑定的实现: [WebKit]为JavaScript Binding添加新DOM对象的三种方式及实作 对于视频元素,可以对应看看JSHTMLMediaElement.cpp和JSHTMLVideoElement.cpp中的实现. 这里只说一下事件的处理机制.就是在WebKit中有

html5 video 外挂字幕[webVTT]研究

html5 video 外挂字幕[webVTT]研究 目录 WebVTT是什么 WebVTT内容 设置字幕样式 为字幕设置位置 章节chapters解释 webVTT 详解 webVTT实现 浏览器行为 浏览器支持情况 WebVTT是什么 html5 video 外挂字幕英文简称webVTT[video text track 网络视频文本轨道],是一个以.vtt结尾的纯文本文件,里面会包含以下几种视频信息: 字幕subtitles > 关于对话的转译或者翻译 标题captions > 类似于标

HTML5 video标签(播放器)学习笔记(二):播放控制

HTML5 video标签(播放器)学习笔记(二):播放控制 本文的目录: 1.获取影片总时长 2.播放.暂停 3.获取影片已播放时间和设置播放点 4.音量的获取和设置 第一.获取影片总时长 对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的.在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素 代码如下: <video id="myVideo" controls prelo

html5 video标签切换视频问题

问题描述 html5 video标签切换视频问题 现在想实现这么一个功能: html5 video标签在播放视频过程中,点击按钮切换到另一个视频资源,并跳到上一个视频的时间点. 比如,A视频播放到3分15秒,点击某一个按钮后,播放B视频,且从4分15秒开始播. 不知道为什么,PC上没有问题,可以正常跳转.但是移动端就会出问题,尤其是安卓客户端,都是从头开始播. 求大神解救! 以下是部分代码: <video id=""my_video_id"" class=&q

开放问题-ios html5 video m3u8 直接播放

问题描述 ios html5 video m3u8 直接播放 在ios先做视频播放 html5 video 标签 播放的m3u8 格式的 显示页面一打开 不是直接播放 内容 需要点击视频 然后全屏播放的 有没有方法直接加载后 直接播放 <video id="video_player" width="640" height="352" controls="controls" src=""> You

Web视频播放 之 【HTML5 Video标签】

一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持. 对于IE8及以下的IE浏览器,可考虑引入html5扩展支持js来尝试解决,未亲测. 三.视频协议支持 支 持:Ogg.MPEG4.WebM 不支持:rtmp.rtsp(如果进行转码,切成HLS可以播放,但是即使在局域网内也有3秒

Webkit中HTML5 Video的实现分析(六) - Safari视频机制分析

Safari中的视频相关操作封装在QuickTime Plugin里面,存放于/Library/Internet Plugin目录下.   下图是相关类的class diagram: 其中的QuickTime Plugin是通过已淘汰的Apple之前定义的Webkit Plugin协议来实现的,而不是现在支持的Netscape API的机制. 可以参考以下文档:        Introduction to WebKit Plugin Programming Topic           We

HTML5 video标签(播放器)学习笔记(一):使用入门

 HTML5 video标签(播放器)学习笔记(一):使用入门 近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作. 网上的教程其实也不少了 w3cschool里面的最为简单而详细,那么这几介绍的是一些更为直接的应用. 本文目录: 1.使用标签 2.加上一些必要参数 3.自动播放或自动加载 4.规范播放器 第一步:使用标签 使用的方法很简单,就是一句代码: 代码如下: <video></vi