Jtemplates asynchronous load implementation and HTML5 video development __html

Recent projects related to Web apps have taken several strategies to dynamically load the corresponding speed:
1.PHP background submission automatically generates a static list page.
2.PHP background submission automatically generates a list page resource/Article JSON data file, Javascriptfilename.js. The 17881.js below.
2. List page sliding load uses jtemplates to read data from javascriptfilename.js data files to show.

Jtemplates is a jquery based template engine plug-in that is designed to dynamically bind data to dynamically generate presentation data on a page. It is a good idea to define a template before you use jtemplates and then migrate the template to the TextArea hidden text box. Website address: http://jtemplates.tpython.com/

<textarea id= "Txttemplate" style= "Display:none" >
<![ cdata[This is
{$T. name}.]
] >
</textarea>

The jtemplates contains three predetermined global variables, namely, $t, $P, $Q. $T provides data invocation functionality for templates, $P provides parameter variable invocation functionality for templates, $Q. Version provides the current jtemplate versions.
Jtemplates also supports #if, #for, #cycle, #foreach, #include, #param标签 to handle complex business.

#if Syntax:
{#if | cond|}. {#elseif | cond|}. {#else}. {#/if}

#if Example:

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

#for Syntax:
{#for | var| = | code| to | code| [step=| Code|]}. {#else}. {#/for}
Or
{#for |variable| = |start| to |end| [Step=|stepby|]}. {#else}. {#/for}

#for Example:

Default step: {#for index = 1 to ten} {$T. index} {#/for}
Forward step: {#for index = 1 to step=3} {$T. index} {#/for}
Negative step and empty loop: {#for index = 1 to ten step=-3} {$T. index} {#else} nothing {#/for}
You can also use variables in loops: {#for index = $T. Start to $T. step= $T. Step} {$T. index} {#/for}
Note that JavaScript code is supported in conditions, {#else} is in {#for ...} The output of the time that failed to execute ...

Main code:

<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" >  <i class=" "></i> </div> <div class=" info ">  

 
Data.js equivalent to data processing layer, file code:


(function ($) {//plug-in definition $.fn.busdata = function (options) {//build main options before element it    
    eration 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;
	 Defines the exposure function $.fn.busdata.start = functions (obj,start,end,template,jsname) {$loadbtn = $ (". Load-btn");  Jquery.ajax ({type: "Get", Url:jsname, DataType: "Script", Beforesend:function () {$loadbtn. html ("<b	class= ' loading ' ></b> ');
			Set load state diagram}, 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) {//Set template if (template== "Focustemplatecontainer") {$ ("#buttonFoucs"). Settemplat
				Eelement ("Buttonfocustemplatecontainer");
				$ ("#buttonFoucs"). ProcessTemplate (data);
				} obj.settemplateelement (template);
				Process template obj.processtemplate (data);

			$loadbtn. HTML ("Click to load More"); }else{$loadbtn. Text ("Juvenile:-) You have browsed to the last page.
				");
			Return  
  }, Complete:function () {//}})}; Plugin defaults $.fn.busdata.defaults = {pagesize:10, page:1, Data: ', Jsname: '.    
/js/17881.js ', Template: '};      
 Closure end}) (JQuery);
 

 

 
We know that HTML5 <video> tags on the PC side of the browser support is not satisfactory, if you want to consider compatibility, the need for many kinds of fallback support, the following example:


<video onclick= "This.play ();" poster= ". /html5video/clip_1080_5sec_10mbps_h264.jpg "width=" "height=" 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=" "height=" 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=" "height=" style= "position:relative;" Flashvars= "autoplay=true&controls=true&fullscreenenabled=true&posteronend=true&Amp;loop=false&poster=.. /HTML5VIDEO/CLIP_1080_5SEC_10MBPS_H264.JPG&AMP;SRC=CLIP_1080_5SEC_10MBPS_H264.M4V "allowFullScreen=" true "wmode=
		"Transparent" type= "Application/x-shockwave-flash" pluginspage= "Http://www.adobe.com/go/getflashplayer_en"/>  </object> </video>
 

 

 

There is no discussion here. And the mobile phone is currently mainly iOS and Android two big camp. If it is for mobile phone to do the development of video playback, now can be bold to use videos.
HTML5 <video> labels on Android systems
Support for HTML5:
The 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.
Since Android 2.0 is starting to support HTML5 's video tags, Android phones are now popular to 4.2, and using HTML5 video is no doubt a mature condition.


iOS has long supported the audio/video tag and has implemented HTML5 Video/audio tags from ios 3.0+/safari 3.1+. Therefore, not to worry about the support of iOS devices.


Now that the two camps are well supported by the HTML5 video, let's talk about the basics of using.

Supported Property Sheets:





 
 
 
  
 
   
 
    
Attribute
 
    
Value
 
    
Description
 
   
 
   
 
    
Preload
This attribute is 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 ' the ' the ' the ' the ' the ' ' the '
 
   
 
   
 
    
Src
 
    
Url
 
    
The URL of the media.
 
   
 
   
 
    
Width (video only)
 
    
Pixels
 
    
The width of the video player.
 
   
 
  

 
 

 

It is to be noted that

The Safri built-in control bar features include play/pause/volume/Time progress bars, Safari 5.0+ (Desktop edition) and iOS 4.2 (ipad version) with full screen function buttons on the bottom right. Control bar playback state automatically disappears, hover and touch display. Safari 5.1+, users can also css/javascript development of controlls according to need, in Full-screen mode using their own control bar display. For more information on JavaScript and CSS3 development, please refer to 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 does not support all audio video formats, the desktop version is more than the mobile version of the support format, Safari supports streaming media based on the HTTP Live streaming protocol, while other browsers only support HTTP-based file download playback.

Support format:

H.264 Baseline Profile Level 3.0 and up to 640 X-fps at. Note This B frames are not supported in the Baseline profile.

 

MPEG-4 Part 2

 

AAC-LC audio, up to-kHz

corresponding suffix name. mov,. mp4,. M4V, and. 3gp

 

The file suffix corresponds to the MIME type:

 

 

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

 
 

Android and iOS browser currently have limited support for HTML5 and CSS3, and even the latest version of Chromium is not fully supported for HTML5.

You can open this site in your mobile browser to test the support for HTML5 features and APIs http://html5test.com/

 


  Supplements:  
 http Live streaming (abbreviated HLS) is an HTTP-based streaming media network transport protocol proposed by Apple. is part of Apple's QuickTime X and iphone software system. It works by dividing the entire stream into small, HTTP-based files that download only a few downloads at a time. When media streaming is playing, clients can choose to download the same resources at different rates from many different standby sources, allowing streaming media sessions to adapt to different data rates. When you start a streaming session, the client downloads a extended m3u (m3u8) playlist file that contains the metadata to find the available media stream. 
 
 Reference article: 
 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