jTemplates异步加载实现与HTML5 video视频开发

最近做有关Web App有关的项目，为了动态加载相应速度更快，采用了以下几个策略：
1.PHP后台提交自动生成静态列表页面。
2.PHP后台提交自动生成列表页资源/文章的json数据文件，javascriptFileName.js。下面的17881.js。
2.列表页滑动加载使用jTemplates读取javascriptFileName.js数据文件的数据进行展现。

jTemplates是一个基于JQuery的模板引擎插件,适合用来在页面上动态绑定数据动态生成展现数据。。在使用jTemplates时最好先定义好模板，然后将模板迁移至textarea隐藏文本框。官网地址：http://jtemplates.tpython.com/

<textarea id="txtTemplate" style="display:none">
<![CDATA[
This is {$T.name}.
]]>
</textarea>

jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调用功能，$P为模板提供参数变量调用功能，$Q.version提供当前jTemplate的版本.
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签，处理实现复杂的业务。

#if 语法：
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}

#if 示例:

{#if $T.list_id} {$T.list_id} {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

#for 语法：
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}

#for 示例：

默认步长：{#for index = 1 to 10} {$T.index} {#/for}
正向步长：{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使用变量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
注意条件中支持使用javascript代码，{#else}是在{#for...}未能执行的时的输出内容。。

主要代码：

<script type="text/javascript" src="../js/jquery-jtemplates.js"></script>
<script type="text/javascript" src="../js/data.js"></script><textarea id="resourceTemplateContainer" style="display: none;">
{#foreach $T.Lists as row begin=$T.start count=$T.end}<li><div class="icon"><img alt="{$T.row.elementname}" src="{#if $T.row.elementlogo}{$T.row.elementlogo}{#else}../img/bg72.png{#/if}" title=""><i class=""></i></div><div class="info"><h2>{$T.row.elementname}</h2><p class="txt">{$T.row.flodertype}</p><span class="arrow"></span><div class="downbtn free"><a title="{$T.row.elementname}" href="{$T.row.downpath}"></a>免费下载</div></div><a class="down-area" title="点击查看详情" href="res_{#if document.getElementById("isios").value ==0}17881{#elseif document.getElementById("isios").value ==1}17941{#/if}_{$T.row.reit_url}.html"></a></li>
{#/for}
</textarea><script type="text/javascript">
$(document).ready(function(){$(".bar .slidemenubtn").click(function(){//bug fix -chrome中的 blur事件要先调用focus()否则blur无效this.focus();$(".slidemenu").slideToggle("slow");}).blur(function(){$(".slidemenu").hide("slow");});var pagenum = 1 , dataFileName = '../js/17881', templateName = "resourceTemplateContainer";$(".ajax-wrap ul").busdata({pageSize:"10", page:1, jsName:dataFileName + ".js",template:templateName});$(".load-btn").click(function(){pagenum++;var con = $(".ajax-wrap ul").busdata({pageSize:"10", page:pagenum, jsName:dataFileName + ".js", template:templateName});             });
});
</script>数据格式17881.jsvar data = {
TotalCount:20,
Lists:[
{reit_url:'pv01q2',elementname:'终极狂飙3',elementlogo:'../img/res/pv01q2/element_logo_1308051724017817.png',flodertype:'你沸腾的节操将会悲催的碎一地！',downpath:'../pack/3dcar3_0820_4028.apk?n=3dcar3_0820_4028'},
{reit_url:'mgv520',elementname:'海贼王',elementlogo:'../img/res/mgv520/element_logo_1308140947295130.png',flodertype:'热门游戏',downpath:'../pack/dreamonepiece_feiliu_build_100537.apk?n=DreamOnePiece_feiliu_build_100537'},
]};

data.js相当于数据处理层，文件代码：


(function($) {    // 插件的定义    $.fn.busdata = function(options) {       // build main options before element iteration    var opts = $.extend({}, $.fn.busdata.defaults, options);    return this.each(function() {    var obj = $(this);opts.start = (opts.page - 1) * opts.pageSize;opts.end = opts.pageSize;$.fn.busdata.start(obj,opts.start,opts.end,opts.template,opts.jsName);//$(opts.menuDiv_dom, $("#"+opts.menuDiv)).hide(opts.showSpeed);});    };//$.fn.busdata.n = 0;// 定义暴露函数    $.fn.busdata.start = function(obj,start,end,template,jsName) {$loadbtn = $(".load-btn");jQuery.ajax({     type: "get",url: jsName,dataType : "script",beforeSend: function(){$loadbtn.html("<b class='loading'></b>");   //设置加载状态图},success: function(msg){  data.start = start;data.end = end;videoHead = "";var thisUrl = document.location.host; var tip = thisUrl.split(":");if(thisUrl.indexOf("16wifi") > -1){videoHead =  "http://"+tip[0]+"/pack/feiliu/video";} else {            videoHead = "http://"+tip[0]+":8090/pack/feiliu/video";             }data.videoHead = videoHead;if(data.TotalCount - data.start > 0){// 设置模板if(template=="focusTemplateContainer"){$("#buttonFoucs").setTemplateElement("buttonFocusTemplateContainer");$("#buttonFoucs").processTemplate(data);}obj.setTemplateElement(template);// 处理模板obj.processTemplate(data);$loadbtn.html("点击加载更多");}else{$loadbtn.text("少年 :-) 你已浏览到末页！");return;}},complete: function(){//}})};  // 插件的defaults    $.fn.busdata.defaults = {pageSize:10,  page:1,data:'',jsName: '../js/17881.js',template: ''};
// 闭包结束
})(jQuery);

我们知道HTML5 <video>标签在PC端各浏览器的支持不尽如人意，如果要考虑兼容，需要很多种的fallback支持，如下事例：

<video οnclick="this.play();" poster="../html5video/Clip_1080_5sec_10mbps_h264.jpg" width="80" height="60" title="Clip_1080_5sec_10mbps_h264"><source src="../html5video/Clip_1080_5sec_10mbps_h264.m4v" type="video/mp4" /><source src="../html5video/Clip_1080_5sec_10mbps_h264.webm" type="video/webm" /><object type="application/x-shockwave-flash" data="../html5video/flashfox.swf" width="80" height="60" style="position:relative;"><param name="movie" value="../html5video/flashfox.swf" /><param name="allowFullScreen" value="true" /><param name="flashVars" value="autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=../html5video/Clip_1080_5sec_10mbps_h264.jpg&src=Clip_1080_5sec_10mbps_h264.m4v" /><embed src="../html5video/flashfox.swf" width="80" height="60" style="position:relative;"  flashVars="autoplay=true&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=../html5video/Clip_1080_5sec_10mbps_h264.jpg&src=Clip_1080_5sec_10mbps_h264.m4v"   allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" /><img alt="Clip_1080_5sec_10mbps_h264" src="../html5video/Clip_1080_5sec_10mbps_h264.jpg" style="position:absolute;left:0;" width="80" height="60" title="Video playback is not supported by your browser" /></object>
</video>

这里暂且不讨论。而手机目前主要是

ios和android两大阵营。如果是为手机端做开发进行视频播放，如今已经可以大胆的使用video了。
安卓系统上HTML5 <video> 标签
Support for HTML5:
Database API support, for client-side databases using SQL.
Application cache support, for offline applications.
Geolocation API support, to provide location information about the device.
<video> tag support in fullscreen mode.
由此可知安卓系统从Android 2.0版本就开始支持html5的video标签，目前android手机已经普及到4.2了，使用html5 video毫无疑问条件已经非常成熟了。

而iOS很早就对audio/video标签进行了支持，从iOS 3.0+/Safari 3.1+ 开始就已经实现了对 HTML5 video/audio 标签的支持。因此，更不用担心ios设备的支持问题了。

既然两大阵营目前都对 HTML5 video 支持的不错，下面就说说使用中基础知识。

支持的属性表：

Attribute	Value	Description
preload This attribute was formerly named autobuffer, and was boolean.	`none \| metadata \| auto`	`none`—Safari should not preload media data. `metadata`—Safari should preload only media metadata. `automatic`—Safari should preload all media data.
autoplay	Boolean—any value sets this to `true`	If present, asks the browser to play the media automatically.
controls	Boolean—any value sets this to `true`	If present, causes the browser to display the default media controls.
height (video only)	pixels	The height of the video player.
loop	Boolean—any value sets this to `true`	If present, causes the media to loop indefinitely. This attribute is supported in iOS 5.0 and later.
poster (video only)	url of image file	If present, shows the poster image until the first frame of video has downloaded.
src	url	The URL of the media.
width (video only)	pixels	The width of the video player.

需要注意的是
在Safri内置的控制条功能包括播放/暂停/音量/时间进度条，Safari 5.0+（桌面版）和iOS 4.2（iPad版）右下有全屏功能按钮。控制条播放状态下自动消失，hover和触摸时显示。Safari 5.1+，用户也可以根据需要对controlls进行CSS/JavaScript开发，在全屏模式下使用自己的控制条展示。更多有关javascript和CSS3的开发知识请参考https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html#//apple_ref/doc/uid/TP40009523-CH1-SW1

audio/video并不支持所有音频视频格式，桌面版要比手机版支持的格式更多，Safari支持基于HTTP Live Streaming协议的流媒体传输，而其他浏览器只支持基于HTTP的文件下载播放。
支持格式：
H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.

MPEG-4 Part 2 video (Simple Profile)

AAC-LC audio, up to 48 kHz
对应后缀名.mov, .mp4, .m4v, and .3gp

文件后缀与MIME类型对应：

Extensions	MIME type
`.mov`	video/quicktime
`.mp4`	video/mp4
`.m4v`	video/x-m4v
`.3gp`	video/3gpp

Android和iOS的Browser目前对HTML5和CSS3的支持都很有限，即使是Chromium最新版本对HTML5也不是完全支持。
可以在手机浏览器打开这个网站测试一下对HTML5功能和API的支持情况 http://html5test.com/

补充：

HTTP Live Streaming（缩写是 HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8) playlist文件，用于寻找可用的媒体流。

参考文章：
【 Audio and Video HTML】https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
【 Creating Video】https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

jTemplates异步加载实现与HTML5 video视频开发相关推荐

HTML5 script元素async,defer异步加载
原文地址:HTML5′s async Script Attribute (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再注: 建议使用 defer,但是经测试发现 defer 属性对页面内 ...
android 视频的缩略图缓存机制和异步加载缩略图
在这次的工作开发项目中,涉及到一个视频缩略图的视频列表:这个在大家看来,制作视频缩略图就是两行代码就搞定的事.确实是这样的,百度一下,每个帖子都知道制作视频缩略图的方法,在这里确实也是一样的,但是我要 ...
Android之使用Android-AQuery异步加载图片（一）
第一节:转载地址(http://www.cnblogs.com/lee0oo0/archive/2012/10/25/2738299.html) // 必须实现AQuery这个类 AQuery aq ...
异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
[css] 异步加载CSS的方式有哪些？
[css] 异步加载CSS的方式有哪些? 异步加载CSS 说到加载 CSS 这种事儿不是很简单吗?像这样咯: 这不就完事儿了嘛! 这样是没错!但是这样有问题啊--会阻塞渲染!浏览器看到这个标签就会停下 ...
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
ImageLoader实现图片异步加载
ImageLoader是一个广泛使用的图片库,在向网络请求图片时,使用imageView和smartView常会产生outofmemory错误,这时ImageLoader可以起到很大的作用,主要有如下 ...
android异步加载视频缩略图,Android 视频缩略图的缓存机制和异步加载
关注微信号:javalearns 随时随地学Java 或扫一扫随时随地学Java 在这次的工作开发项目中,涉及到一个视频缩略图的视频列表:这个在大家看来,制作视频缩略图就是两行代码就搞定的事.确 ...
14. 异步加载Js的方式有哪些？
我们都知道渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染,如下: <script type="text/javascript" src=". ...

jTemplates异步加载实现与HTML5 video视频开发

jTemplates异步加载实现与HTML5 video视频开发相关推荐

最新文章

热门文章