HTML5 video 元素及获取视频播放事件

Html5 的扩展极大的方便了web开发. 比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件. video 元素 Html5 的 video 元素扩展出来非常多的方法,属性,事件 等. 我们可以直接在此控件上播放,暂停 等操作. 现在,Safari 3以上、Firefox 4以上、Opera 10以上,以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持 表现形式: <video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>

m3u8 跨平台 全兼容 移动 web在线视频 播放器

什么是m3u m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。 播放器并不是播放它,而是根据它的记录找到网络地址进行在线播放 什么是m3u8 m3u8 是在 m3u 格式下扩展出来的, 可以播流或者点播形式,目的是实现时实性及保密性它会不让你获取它的视频所在地址 浏览器使用的是 m3u8 文件。 m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。 播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。 整个直播过程就是依靠一个不断更新

MP4Box 借用HTML5 file api 本地读取 mp4 头信息

上一篇博文介绍了 html5 file api html5 提供了一套可以操作本地文件的 api ,但是有一定的局限性 必须由用户发起一个事件,所以你不要妄想着用户浏览器加载某个站点时,主动去读取他本地硬盘的资料....不可能的. 你的浏览器必须支持 html5 的 file api ,所以你也不要妄想去兼容IE6 用户发起行为比如: file upload 操作, 文件拖拽 等. 最近遇到一个需求 1.本地上传视频要保存到七牛服务器 2.提交切割视频任务 (大文件切割成多份) 3.返回视频截图 (按视频长短截取图片,供管理员审核视频内容) 七牛这边提供的有 j

HTML5读取 本地文件 File Api 使用

javascript 访问本地文件,已经成为可能. HTML5 file api 该规范主要定义了以下数据结构: File FileList Blob HTML5 访问文件和大部分语言是一致的,先获取文件句柄,然后调用文件访问接口,打开文件句柄,读取文件! 选择文件 首先检测一下当前浏览器是否支持File Api: function isSupportFileApi() { if(window.File && window.FileList && window.FileReader && window.Blob

关于 html4 和 html5 定义上的一些区别

关于Html5 的一些定义 及旧的Html 规定有何区别 html 头的定义 html4 及 以下版本 <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> html5 '` DOCTYPE 这个定义在Html 页面头部的参数告诉浏览器,你当前的内容是什么类型,需要如何渲染解析 那如果你把 html4 解析的页面定义成了 html5 个规范,会发生什么情况呢? 答案是 什么情况都没有 W3C标准已经像地球所有人

使用 viewport 来控制移动端页面宽高,缩放等展示效果

现在的移动端开发页面已经离不开<meta name="viewport"> 元素的支持了.viewport 标签对移动端设备浏览器的宽,高,缩放等属性做了相应的控制:<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">现在我们来看下 content包括哪些属性的定义:width=device-width默认页面宽度等于 设备浏览器宽度 (device-width)height=device-height

HTML5页面滑动到最底部触发内容加载 javascript实现

最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度 functiongetDocumentTop(){ varsc

javascript 实现html5 页面下拉刷新

使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示
  • 1

回到顶部