Jtemplates asynchronous load implementation and HTML5 video development __html

Source: Internet
Author: User
Tags pack
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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.