如何让 video 标签支持 hls/m3u8 视频流直播

苹果的 safari 直接支持 hls。但是其他的浏览器却没有提供相应的支持。根据我的测试,android 手机的 webview 可以支持 hls,PC 上的 chrome 却不行,很令人费解。 下面是 videojs 给出的一套 hls 解决方案: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

一些关于 Viewport 与 device-width 的东西

CSS pixel 与 device pixels (css px 与 device px)首先了解下什么是 CSS pixels,什么是 device pixels; CSS pixels 可以理解为 css 像素,是浏览器使用的抽象单位,主要用来在网页上绘制内容。也可以说 css px 是专门为 web 开发者提出的一个抽象概念,也只跟我们平时写的 css 样式有关,与分辨率(比如 7...

javascript 深入理解 js 闭包

一、变量的作用域要理解闭包,首先必须理解 Javascript 特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript 语言的特殊之处,就在于函数内部可以直接读取全局变量。 Js 代码 var n = 999; function f1() { alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量。

利用 document.activeElement 获取焦点元素

document.activeElementdocument.activeElement 三大浏览器 (ie、firefox、chrome) 都支持,但,针对的对象不同,返回的值也不同。 IE:document.activeElement 可获得所有聚焦的元素,包括 input、textarea、div 等。IE 只关心光标聚焦的位置,不关心聚焦元素的性质。 Chrome:document....

HTML5 File API 实现带有进度提示的文件上传

Html5 终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用 Flash 去实现这一功能,还有一些网站继续采用 Html <form> with enctype=multipart/form-data,但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时,你发送给它一个字节流,所以你需要知道你已经接收到多少字节...

link 标签中 rel=* 的作用

rel 的作用Link 标签有两个作用:1. 定义文档与外部资源的关系;2. 是链接样式表。 最常用的写法,即外链 CSS <link rel="stylesheet" type="text/css" href="theme.css" /> rel 该属性规定当前文档与被链接文档之间的关系。但是,只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部...