HTML5视频VIDEO标签播放器关闭了controls时的字幕通过JS关闭方法

最近研究html5的video标签,尝试自己做一个播放器.然后既然是自己做必然要将video的controls给关掉.那我们该如何控制字幕的显示和隐藏了呢?

最近研究html5的video标签,尝试自己做一个播放器.然后既然是自己做必然要将video的controls给关掉.

然后想到了如果要控制字幕这可怎么办呢,找了好久才找到如何通过js来控制字幕的显示与隐藏开关.其实也很简单.

这个测试仅针对视频有一个track标签.

HTML:

<video class="video" id="video" width="640" height="480" preload="auto" poster="https://github.com/whidy/video-player/blob/master/src/poster.png?raw=true">
  <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video. YOU ARE BAD!</p>
  <track kind="subtitles" src="./subtitles.vtt" srclang="en" default>
</video>
<a href="javascript:;" id="btnCapSwitcher">Subtitle On/Off</a>

JAVASCRIPT:

var video = document.getElementById('video'),
  btnCapSwitcher = document.getElementById('btnCapSwitcher');
// 字幕开关(注意在本次demo测试中只有一个字幕因此可以这样处理,如果存在多个字幕需可能需要修改)
btnCapSwitcher.addEventListener('click', function () {
  if (video.textTracks[0].mode == 'hidden') {
    video.textTracks[0].mode = 'showing';
  } else {
    video.textTracks[0].mode = 'hidden';
  }
}, 'false');

参考 Toggling Closed Caption in HTML5 video and disabling default video controls

如果有多个字幕参考 Subtitle implementation

IScroll的click单击事件变为双击多次触发解决

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.其间收集了一些资料,但是苦于项目上线后一直都比较忙,也就没有什么时间总结这个iscroll插件的一些问题,距离项目上线已经有了半个月了,我下文写的不好还请见谅.

首先iscroll是为了让wap端页面的的某个层内能够固定滚动而特别制作的,我起初想这个东西使用好像还是比较广泛的,问题应该不多吧.之前同事也有使用过,不过基本上使用的是简单的功能,而我这次进行的更多是复杂的交互效果,因此,让我纠结了很久的就是android手机在不同系统版本上,在不同浏览器上以及不同系统版本和不同版本浏览器这三种情况都可能发生各种问题.

参考资料:

https://github.com/cubiq/iscroll/issues/674

https://github.com/cubiq/iscroll/issues/547


以上内容是一个月前写的…我已记不清了,大概是处理不同设备的click事件遇到了很多问题,,,这篇文章放在草稿箱许久了,是时候终结了!

这个iscroll插件的确有很多需要注意的地方,仔细阅读了文档重要部分好几遍,结果写的代码还是问题很多,本文就iscroll使用上的一些问题总结一下与大家分享分享.

我们先来看一个demo(从项目中提出可能有部分冗余代码),主要用于分类选择,菜单弹出功能,(实际应用效果见太平洋电脑网手机端产品库页面,当然后期可能改版,实际效果与demo略有差异)如,用到zepto库,iscroll插件.其中iscroll主要是处理固定高度的滑动效果,它能够自适应并兼容很多设备,所以我选择了插件.

当然每个可以上下滑动的区域都需要创建一个IScroll实例,只需要简单的一句话即可,但是要遵守它的HTML代码结构,详细可以参考官方文档.这里就不讲基本的使用方法了,底部有资料写的很清楚了.我就简要说一下关于这个DEMO中的注意事项.

首先是这是一个带有弹出层的页面,每次点击导航会有一个向下滚出的层,那么弹出后就会创建对应的一个或两个iscroll实例,当点击顶部收回的时候,容易忽略一点,刚创建的实例依然存在,假设收回不销毁新建的实例,就会出问题!

其次,iscroll内的的click事件处理,默认是false,这在ios系统的手机上会出现click执行两次,也就无效的情况,需要改成true,所以需要对创建的示例增加参数.但是问题在于兼容了ios后,android各个版本会出现同样的问题.解决方案,对不同的安卓设备采取不同的click属性值处理,但是经过大量机器测试,依然可能出现无法兼容的情况(实际上是通过一个正则处理的,见代码)

function iScrollClick(){ //设备识别来控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
    } //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}

其实官方文档中有一个options.preventDefault的属性可以配置,但是不知道是哪里出了问题,经过反复测试都没起到作用.于是这个问题折腾了很久…直到有一天…

虽然早起处理这个问题的时候就知道有fastclick,或许可以解决,但是又是一个插件,毕竟一个项目中用太多的插件不好,所以未采纳,前几天研究移动端的touch事件和普通的pc端click等事件时,更清楚的明白了一些东西,例如事件冒泡等…反复琢磨测试,觉得fastclick或许也是可行的,既然之前的方案不够完美,不妨试试这个demo,去掉了iscroll对click的配置(即默认都是false),并添加了fastclick插件及全局配置后,测试了很多机器,发现,并未出现问题.那么目前来看针对iscroll出现的双击,穿透,或是点击延时等问题应该全部处理好了!

毕竟这个内容过去太久,凭借回忆来写的,可能有些混乱,建议有遇到类似问题的朋友仔细看看两个demo的区别,一个是正则处理iscroll的click属性的demo,一个是用fastclick插件的iscroll demo,只需要注意两个demo的js的区别即可!

最后附上相关参考资料:

官方资料: IScroll官方网站 IScroll PDF参考手册 IScroll Github

其他: iScroll 5 API 中文版


后来发现,原来这不是万金油,总会有些坑爹的情况.比如魅族原生浏览器,还有chrome…竟然也会出问题,太失望了.

也就是说,在魅族原生浏览器下,需要设置为click : true才能正常运作,魅族原生浏览器如果false则会出现两次点击,而产生意外情况.而chrome则是当false时,整个iscroll容器内的事件全部被阻止了..没有办法只得打补丁了.于是加了以下代码…

var clickBoolean = false;
if (/Chrome/i.test(UA)) clickBoolean = true;
if (/534.30/i.test(UA)) {
    if (/UCBrowser/i.test(UA)) clickBoolean = false; //覆盖同版本
    else clickBoolean = true; //魅族原生?
}

我本来想通过UA标识来区分魅族浏览器,因为我这个写了534.30来区分魅族的方法风险太大因为UC也是这个版本,所以又加了一条如果是uc还是要用false,想在魅族的UA上处理,但是魅族原生浏览器真的很坑,UA上面根本无法下手.只能临时采用下策了.

这几点是需要大家注意的…(2015年2月2日18:54:00)

安装express后验证显示没有相应命令

要总结什么规律,想自己写点东西出来,但是java的东西,公司已经限定死了,不使用优秀的开源框架,前端的js是不限制的,发现nodejs可以使用来开发后台的东西,直接操作文件也是可以的,于是就想使用nodejs来写。

安装了一个web的框架exress,是安装网上说的方法

sudo npm install -gd express

在命令行里敲express -V没有反映,出现/usr/bin/env:node No such file or directory的错误,别的说什么要安装一个工具集,

sudo npm install -g express-generator

擦,搞完之后敲express -V还是没有用,后来找usr/local/bin里面的express文件打开看,开头引用的是:#!/usr/bin/env node

引用的是node命令,但是node命令在安装了nodejs后一直使用的是nodejs的命令,在user/bin中可以找到nodejs的可执行文件,也就是在环境变量里只有nodejs,没有node,所以我直接在这个文件夹里sudo cp nodejs node

事实上我觉得,直接在这个文件夹下建立一个软链接,貌似也是可以用的,只是没有测试过。有兴趣可以自己试一下。

搞完之后直接敲express -V,ok,出来想要的东西了。其实还有很多nodejs的包在用npm下载之后是默认调用的node这个命令。因此,在环境变量中添加一个node命令还是比较靠谱的说。

元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型(即id),也可以是htmlElement对象。觉得getEL是个累赘的话,就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL,不用$,避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

绝对定位元素随滚动条滑动无延时不闪烁的解决办法!

不得不说,清明放假,没什么好玩的,年纪来了,越发觉得打游戏也没意思,整天玩炉石被虐,为什么都喜欢跟风打鱼人流?我下午连续打了6盘有4盘是鱼人流,全败,基本不超过6个回合,我又是为了完成任务选的不常用的角色,打得我快吐,为了赢,为了刷排名?真是没意思,能不能打的有创意一点???更有甚者,明明是优势,确一个劲抽风似的对你说”打得不错”,或者是嘲讽语,太脑残了!太脑残了!!!这些玩炉石的人,太脑残了!!!

好了,吐槽完毕,我不吐槽无法释放内心的不满.来说一说这两天的成果,搞得蛋都快碎了…

绝对定位元素随滚动条滑动不闪烁DEMO
绝对定位元素随滚动条滑动不闪烁DEMO

继续阅读“绝对定位元素随滚动条滑动无延时不闪烁的解决办法!”

phpcms单页面模板获取栏目数据翻页无效解决办法

不得不说有时候为了做一些很奇特的页面,或者说为了解决一些很蛋疼的功能,我们不得不做一些不正常的工作…比如,我把PHPCMS的单页面模板做成了一个读取某个限定条件类的文章列表.限定条件的字段已经添加到数据库内.编辑器中只要选中它属于哪一类即可,这里不多说.

发表相关思路之前先给大家看看效果,觉得还不错的,那么你可以继续看看 :lol:

PHPCMS单页面模板列表作弊
PHPCMS单页面模板列表作弊

那么既然是单页面模板,它就有个问题,这个问题就是,单页面模板内是不能使用翻页的功能的.起初我是不知道的,找了一些资料也没解决.那么我就只有想别的办法了.经过一番思索,我认为,可以仿照腾讯微博看到页面底部,自动无限刷新.那么代码的思路就是:

打开该页面获取指定数目的数据(比如20条) > 跟踪坐标当用户拖到页面底部触发事件(js) > 自动生成一段新的异步获取数据下一批数据的代码并更新当前坐标重新计算 > 循环.

继续阅读“phpcms单页面模板获取栏目数据翻页无效解决办法”

Sublime Text 2 注册激活办法以及简单的使用介绍

在网上看到一篇文章,关于现在流行的代码编辑器,突然看到这个Sublime Text 2,于是勾起了兴趣,之所以对这个编辑器感兴趣除了它小小的体积之外,更在于它那酷酷的深色界面.

Sublime Text 2 程序工作界面
Sublime Text 2 程序工作界面

先来一段简单的介绍:

速度快并且功能丰富,几乎支持所有的编程语言。支持多行选择,代码缩放,键盘绑定,宏,拆分视图等等。同时拥有全屏和免打扰 模式。非常适合大屏幕的显示。和TextMate类似,拥有一个非常活跃的社区支持,而且开发了很多的插件和bundle,以前我们介绍过的使用sublime text 2开发Javacript和jQuery,我们可以看到Sublime的强大。它同时支持Linux,Windows和OSX。这个编辑器可以无限期试用。当然你可以花59美元购买,并且安装到任何一台你自己的电脑上。

继续阅读“Sublime Text 2 注册激活办法以及简单的使用介绍”

列表中最后一个元素样式清除修改方法(jQuery)

我们在做动态网站的时候,当遇到导航条的栏目列表或某区域内文章列表等含有大量重复内容区域时,通常会用循环将他们输出,而他们节点的样式都是相同的,比如下边距,外边框的分隔样式,通过循环输出的结果就是最后一个节点依然保留着所有的样式我们是不希望他有下边距或者外边框.

例如: 导航上每个栏目标题(li)右侧可能会用竖线分隔每个栏目标题,于是最后一个栏目右侧也出现了不想要的竖线,但是这些同级的li都是循环出来的 ,我们无法单独给最后一个元素添加特殊的样式,本来有个很简单的方法,那就是使用CSS3的:first和:last选择器,但是当IE6和IE7不支持:first和:last选择器的,有个简单的方法,通过Js(本文用的jQuery)去除或修改列表或循环内容的第一个和最后一个节点的样式,可以兼容所有浏览器,是比较方便的,其实用js可以轻松实现,但是我后来发现,jQuery来处理或许更加轻松些,也是正好我最近在学习jQuery,的确很好用.在body内最后加上一小段就可以了,比如下面这个简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LastChildStyleRemove</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#mainContent {background-color:#eee;}
#mainContent ul.nav {list-style:none;font-size:12px;}
#mainContent ul.nav li {float:left;padding:5px 15px;border-left:1px solid #fff;border-right:1px solid #ddd;}
#mainContent ul.nav li a {color:#666;text-decoration:none;}
</style>
</head>
<body>
	<div id="mainContent">
		<ul class="nav">
			<li><a href="#">导航一</a></li>
			<li><a href="#">导航二</a></li>
			<li><a href="#">导航三</a></li>
			<li><a href="#">导航四</a></li>
		</ul>
		<div style="clear:both;"></div>
	</div>
</body>
<script>
	$("#mainContent ul.nav li:first-child").css("border-left", "none")
	$("#mainContent ul.nav li:last-child").css("border-right", "none")
</script>
</html>

这个例子除了用到最后一个元素样式清除,也用了首个元素样式清除,这个很好理解,这是两个方法,其实只用到一个函数css( propertyName , value  ),而关于元素选择器可以查看jQuery的例子::first-child Selector:last-child Selector.上面的例子也很简单清晰易懂…

当然我也在网上看到有这样的javascript写法,不过相对较为复杂,内容如下:

<script language="javascript" type="text/javascript">
  function addClassName(tag,classname){
   if(!tag.className){
    tag.className=classname;
   }else{
    tag.className+=" "+classname;
   }
  }

  function addFirstChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")["0"],"first-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")["0"],"first-child");
   }
  }
  function addLastChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child");
   }
  }

  if(document.all && !window.opera){
   window.onload=addFirstChild;
   window.onload=addLastChild;
  }
 </script>

如果有兴趣可以尝试,至此,大家也发现实际上用jQuery并不困难,用好就有讲究了,不过最好还是打好js的基础,下次我将介绍另外一个简单的效果,关于用jQuery控制下拉菜单悬浮,我用了一个很笨的嵌套方法,有空我在写一下.今天就写到这里希望大家能有所收获.


PS: 其实这个例子就是简单介绍了jQuery的两个用法,如果动态脚本支持判断首尾元素的话,其实直接在HTML内写个判断(例如:phpcms文章列表循环不同样式制作方法),给首尾元素加个class=”first-tag”和class=”last-tag”之类的样式也是不错的选择,实际上现在已经不推荐这样的写法,因为你会发现有很多冗余的小代码,维护十分不方便,这里也就是举一反三,大家视情况来写吧( update: 2014年5月17日 )

js修改标签内内容(下)

经过彻夜和一上午的研究,现在总算是把最终效果弄出来了,我先上代码,老鸟不要笑话(这么简单的东西琢磨半天…),没办法,没有系统学习过这个玩意,很多东西都出问题.代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框焦点样式变化测试</title>
<!--文本框样式可以忽略,不过为了增加特效的观赏性,我简单的加上了.-->
<style>
input {border:1px solid #eee;height:20px;width:100px;line-height:20px;}
</style>
<script type="text/javascript">
window.onload = iSC; //加载iSC()函数
function iSC() {
inputs=document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++) {
inputs[i].onmouseup = function(){this.style.backgroundColor='#fffab5';}
inputs[i].onblur = function(){this.style.backgroundColor='#fff';}
}
}
</script>
</head>
<body>
<form>
  <input type="text" />
  <input type="text" />
  <input type="text" />
</form>
</body>
</html>

当然这只是一个简单的示例,效果也很简单.那段JS也不难理解,这里并没有用到之前所想的用setAttribute()来解决,而后来的多次测试,不知道是不是我代码不对还是其他原因,通过这个方法无法达到目的.总之,通过这个简单的东西我总结出了几个需要注意的问题:

  1. inputs[i].onmouseup = function(){this.style.backgroundColor=’#fffab5′;}不能通过inputs[i].setAttribute(“onmouseup“,”function(){this.style.backgroundColor=’#fffab5′;“)来实现.
  2. window.onload = iSC;千万不能忘记!否则,你会发现,他根本没有运行这个js.当然你同样可以在测试的时候,写一个按钮,测试这个js是否读取了所有的input标签,方便调试.

关于此次学习的其他方面总结包括,在查找问题的同时,我学到了其他的一些特效,特别分享给大家.

其实,在一些高级的浏览器(我基本是把除了IE6(包括相同核心),其他的都算高级了,IE7那不伦不类,IE8稍有长进~)中,input设置一个伪类,十分简单的就可以实现以上效果:

  • 看这个就知道了(除了IE6不行,我测试过IE8和chrome都是没有问题的,我想其他的比如FF,OPERA应该也没有问题吧)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>最简单的输入框变化方法</title>
    <style>
    input:focus {background-color:#FF9;}
    </style>
    </head>
    <body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
    </body>
    </html>
    
  • 另外还有许多其他的效果,比如跟这个类似的,并非样式变化,而是当光标焦点处于输入框时,输入框默认value改变,比如,默认value=”请在此处输入用户名”,当焦点在此时,value=””等待用户输入,,等等效果,这里不一一列举,为了方便大家学习,我顺便将其打包,部分代码摘自互联网,版权的话,我也找不到了,反正大家学习嘛,我想这小东西不会还说我侵权吧…z当然以上我自己总结的东西,大家尽管拿去,有什么疑问也可以发邮箱与我联系交流.
  • 其他部分特效源码打包下载(skydrive网盘地址下载)(除了我这两种之外的源码在内,还有其他三种比较简单的效果)
  • 百度可参考的资料,其实后来我发现,这个不就是我那个差不多的嘛,汗我研究这么久,http://baike.baidu.com/view/1710146.htm

js修改标签内内容(上)

最近几天做页面,跟表单设计制作打交道很多,很多页面的表单格式都很简单,其中,在设计初期,有些效果未添加,而后期需要增加这些效果,于是面对大量的input标签,修改起来也出现了困难,具体情况待我细说.

比如原始的代码大部分格式是这样的:

<html>
<head>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>

而,后来有需求说,需要添加一个效果,当光标进入输入框时,会出现比如输入框边框颜色变化,输入框背景颜色变化的效果,当然,如果这仅仅是修改其中这一个输入框的效果,那么方法很多,其中最简单的方法可能可以这样写:

<html>
<head>
</head>
<body>
<form>
<input type="text" onBlur="this.style.backgroundColor='#ffffff'" onMouseUp="this.style.backgroundColor='#fffab5'" />
</form>
</body>
</html>

是的,大概就是这样,但是如果有很多页面,有很多input标签,难道一个个这样加,虽然我不是很会js,但是我感觉应该可以直接修改input标签内的内容,更多的是通过获取某个ID,并通过setAttribute()修改某个属性的值,然后事实并不是这样的.也不知道是不是我代码写错了,还是什么的,无论是用setAttribute(属性,值)还是setAttribute(属性,函数),效果都无法实现,当然,这里是为了测试才使用ID的,既然无法实现,则采取另外一个思路,直接通过getElementsByTagName()方法,对于这个方法,可以方便的修改所有input标签的属性,即getElementsByTagName(“input”),当然,首先是需要遍历当前页面的所有input标签,然后一个个进行修改,之前,我试了很多次,可能是由于代码规范问题,因为我还没有系统的学习js,或者可能是种种原因,弄了一晚上没弄好,最后还Anfy同学的帮助下,解决了这个问题,由于时间关系,今天暂时写这些,明天把这个简单的小例子写出来,分析,同时也是为了方便以后查阅,举一反三!