当前位置： 代码迷 >> HTML/CSS >> jTemplates异步加载兑现与HTML5 video视频开发
  详细解决方案

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

热度：303   发布时间：2013-09-07 14:12:44.0
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.js

var 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 onclick="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的支持情况 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



  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.