html5 代码:
<video width="640" height="480" controls="controls" id="video" controls preload='none' poster="http://v.zol.com.cn/xxxx.mp4">
js代码:
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document._video = document.getElementById("video");
webm = document.getElementById("webm");
init_events();
init_properties();
setInterval(update_properties, 1000);
}
Function init_events(){
for (key in media_events) { //监听video的各个属性
document._video.addEventListener(key, capture, false);
}
}
Video 具有的属性:
var media_properties = [ "error", "src", "currentSrc", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime","initialTime", "duration", "startOffsetTime", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop","controls", "volume", "muted" ];
用js控制和获取video的值方法:
设置当前播放的时间:setAttribute(media_properties[currentTime],’123’);
eval("document._video." + media_properties[currentTime]);
取视频时长:var r = eval("document._video." + media_properties[duration]);
Alert(r);
控制其他的属性可以用同样的方法。
本文转自:http://techbbs.zol.com.cn/1/9_3193.html
分享到:
相关推荐
Html自做JS视频控制页面 纯js 易懂 实现暂停/播放 声音大小调节 播放条 拖动等功能
WebVideoCreator(简称WVC)是一个将Web动画渲染为视频的框架,基于 Node.js + Puppeteer + Chrome + FFmpeg 实现,它执行确定性的渲染,准确的以目标帧率捕获任何可在HTML5播放动画(CSS3动画/SVG动画/Lottie动画/...
在HTML中实现VLC视频流播放和控制的(包括屏幕的放大缩小、播放的控制、声音大小的控制、图像控制等功能),本DEMO可以播放RTSP实时流(海康、大华等摄像机)、RSTP实时流等主流。。。请放心下载,在IE、360浏览器...
html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio播放控制条,从这个小的...
VLC视频播放器在HTML中控制的实现(包括截图、屏幕的放大缩小、播放的控制、声音大小的控制、图像控制等功能),VLC控件可以播放RTSP实时流(海康、大华等摄像机)、RSTP实时流等主流。。。
本文实例讲述了js控制网页背景音乐播放与停止的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
这个代码是一个基于Web的AI对象检测应用程序,使用了ML5.js和COCO-SSD模型。它可以通过计算机摄像头实时检测视频中的对象,并在屏幕上显示其位置和标签。这种应用程序可用于安全监控、自动化控制和智能家居等领域。 ...
下面来介绍下我按照网上的视频讲解实现的照片墙效果图。 最终实现的效果包括如下: •当点击某张图片时,该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。 •某张图片被点击时,所有的图片的位置...
扫码示例亲测可以用,这个大家可以放心下载!...示例是一个html和一个jsQR.js两个文件,想了解vue环境的代码怎么写的可以去看看我的写的文章。文章链接:https://blog.csdn.net/qq_34227291/article/details/107793197
html ,css分屏实现方案
利用jq简单控制h5视频播放进度条,让使用者不能快进,可以后退。原理是每500毫秒记录一次进度条时间,如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒,那么就让视频返回到上一个进度,因项目开发中对于视频...
使用 HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等,功能十分强大,同时代码比较少加快加载速度。此外跨平台性比较好,特别是一些平板、手机等。例如苹果公司的产品不支持 flash 仅支持 ...
课程内容从HTML开始到跨平台开发,JavaScript核心+新特性,JS+CSS,Ajax+jQuery原理,JS新特性+流行框架,Bootstrap+项目实战,Web开发+项目实战,GitGithub-版本控制工具,NodeJS核心+原理,Webpack4+实现原理,Vue...
TML5获取摄像头和视频控制接口进行扫描二维码前言:以下是在vue环境实现调用摄像头进行扫描二维码并且返回二维码链接的一个操作,在html文件也是可以调用的,只不过修改进行相应的修改。
(2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合...
VLC视频播放器在HTML中控制的实现(包括截图、屏幕的放大缩小、播放的控制、声音大小的控制、图像控制等功能),VLC控件可以播放RTSP实时流(海康、大华等摄像机)、RSTP实时流等主流。
"weixin027校园二手平台的设计与实现+ssm(源码+部署说明+演示视频+源码介绍+lw).rar" 这个资源包似乎是一个关于校园二手交易平台的项目文件,使用了SSM(Spring + SpringMVC + MyBatis)框架进行开发。以下是对这...
用户可以使用这些接口实现基础视频监控业务中实况、回放和云台控制等功能的二次开发。 以JS接口的形式提供SDK开发包。 适用的产品: 1、视频管理平台 VM3500、VM3500-E、VM3500-IT、VM5500-PS、VM5500-E、VM5800、...
使用纯HTML,CSS和Javascript构建。 不包括框架或库。 支持的媒体类型 视频 mp4 mpeg 声音的 mp3 控制按钮 播放/暂停 快退 快进 以前的 下一个 重复 播放清单 最大化 打开文件 静音/取消静音 快捷键 N〜下一个 P〜...
此外,还使用了MySQL作为数据库,Redis作为缓存,以及前端技术如HTML、CSS、JavaScript和jQuery等。 功能模块: 用户管理:包括用户注册、登录、修改个人信息、找回密码等功能。 校友信息管理:包括添加、修改、...