HTML5¼¼Êõ

¡¾HTML5¡¿Ê¹ÓöàýÌå - Ò¶³¬Luka

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2016-10-04 12:00 ÎÒÒªÆÀÂÛ( )

HTML5 Ö§³ÖÖ±½ÓÔÚä¯ÀÀÆ÷Öв¥·ÅÒôƵºÍÊÓÆµÎļþ£¬²»ÐèҪʹÓÃAbode FlashÕâÑùµÄ²å¼þ¡£ 1. ʹÓà video ÔªËØ ¿ÉÒÔÓÃvideo ÔªËØÔÚÍøÒ³ÀïǶÈëÊÓÆµÄÚÈÝ¡£ Æä»ù±¾Ó÷¨ÈçÏ£º ʹÓÃvideoÔªËØ Video cannot be displayed ´ËÀýÏÔʾЧ¹ûÈçÏ£º Èç¹ûä¯ÀÀÆ÷²»Ö§³ÖvideoÔªËØ»ò

HTML5 Ö§³ÖÖ±½ÓÔÚä¯ÀÀÆ÷Öв¥·ÅÒôƵºÍÊÓÆµÎļþ£¬²»ÐèҪʹÓÃAbode FlashÕâÑùµÄ²å¼þ¡£

1. ʹÓà video ÔªËØ

¿ÉÒÔÓÃvideo ÔªËØÔÚÍøÒ³ÀïǶÈëÊÓÆµÄÚÈÝ¡£

Æä»ù±¾Ó÷¨ÈçÏ£º

ʹÓÃvideoÔªËØ Video cannot be displayed

´ËÀýÏÔʾЧ¹ûÈçÏ£º

Èç¹ûä¯ÀÀÆ÷²»Ö§³ÖvideoÔªËØ»òÕßÎÞ·¨²¥·ÅÊÓÆµÄÇô±¸ÓÃÄÚÈÝ£¨¿ªÊ¼ºÍ½áÊø±êǩ֮ÄÚµÄÄÚÈÝ£©¾Í»á´úÌæËüÏÔʾ¡£´ËÀýÖУ¬ÏÔʾÁËÒ»¶Î¼òµ¥µÄÎı¾ÏûÏ¢£¬µ«³£Óõļ¼ÇÉÊÇÌṩʹÓ÷ÑHTML5¼¼Êõ£¨ÀýÈçFlash£©µÄÊÓÆµ²¥·Å£¬ÒÔÖ§³Ö¾É°æµÄä¯ÀÀÆ÷¡£

video ÔªËØÓÐÐí¶àÊôÐÔ£¬Ï±íÁгöÁËËüÃÇ£º

 

1.1 Ô¤ÏȼÓÔØÊÓÆµ

preloadÊôÐÔ¸æËßä¯ÀÀÆ÷£ºµ±Ëü¼ÓÔØÍê°üº¬videoÔªËØµÄÍøÒ³ºó£¬ÊÇ·ñÓ¦¸Ã»ý¼«µØÈ¥ÏÂÔØÊÓÆµ¡£Ô¤ÏȼÓÔØÊÓÆµ¼õÉÙÁËÓû§²¥·ÅʱµÄ³õʼÑÓ³Ù£¬µ«Èç¹ûÓû§²»¹Û¿´ÊÓÆµÔò»áÔì³ÉÍøÂç´ø¿íµÄÀË·Ñ¡£Ï±í½éÉÜÁËÕâ¸öÊôÐÔÔÊÐíÉèÖõÄÖµ¡£

 

ÔÚ¾ö¶¨ÊÇ·ñÔ¤ÏȼÓÔØÊÓÆµÊ±£¬Ó¦µ±È¨ºâÓû§ÏëÒª¹Û¿´ÊÓÆµµÄ¿ÉÄÜÐÔÓë×Ô¶¯ÔØÈëÊÓÆµÄÚÈÝËùÐèÒªµÄ´ø¿í¡£×Ô¶¯ÔØÈëÊÓÆµ»á´øÀ´¸üƽ»¬µÄÓû§ÌåÑ飬µ«Ëü¿ÉÄÜ»á´ó´óÌáÉý¾­Óª³É±¾£¬Èç¹ûÓû§Ã»Óйۿ´ÊÓÆµ¾ÍÀë¿ªÍøÒ³£¬ÄÇôÕâЩ³É±¾¾ÍÀË·ÑÁË¡£

Õâ¸öÊôÐÔµÄmetadataÖµ¿ÉÒÔ±»ÓÃÀ´ÔÚnoneºÍautoÖµÖ®¼ä½¨Á¢ÆðÊÊ¶ÈµÄÆ½ºâ¡£noneÖµµÄÎÊÌâÔÚÓÚÊÓÆµÄÚÈÝ»áÔÚÆÁÄ»ÉÏÏÔʾΪһƬ¿Õ°×ÇøÓò¡£metadataÖµ»áÈÃä¯ÀÀÆ÷»ñÈ¡×ã¹»µÄÐÅÏ¢À´ÏòÓû§Õ¹Ê¾ÊÓÆµµÄµÚÒ»Ö¡£¬¶ø²»±ØÏÂÔØÈ«²¿ÄÚÈÝ¡£

½«noneºÍmetadataÖµÓÃÓÚpreloadÊôÐÔ Video cannot be displayed Video cannot be displayed

´ËÀýչʾÁËÔÚͬһ¸öÎĵµÀïʹÓÃnoneºÍmetadataÖµ£¬ÆäÏÔʾЧ¹ûÈçÏ£¬¿ÉÒÔ¿´µ½ÕâЩֵÈçºÎÓ°Ïìչʾ¸øÓû§µÄÔ¤ÀÀ»­Ãæ¡£

PS:metadataÖµÏòÓû§ÌṩÁËÆ¯ÁÁµÄÔ¤ÀÀ»­Ã棬µ«ÐèÒªÉ÷ÖØÒ»Ð©¡£µ±ÓÃÍøÂç·ÖÎö¹¤¾ß²âÊÔÕâ¸öÊôÐÔ£¬·¢ÏÖ¾¡¹ÜÖ»ÇëÇóÁËÔªÊý¾Ý£¬µ«ÊÇÓÐЩä¯ÀÀÆ÷ʵ¼ÊÉÏ»áÔ¤ÏÈÏÂÔØÕû¸öÊÓÆµ¡£Æ½ÐĶøÂÛ£¬ä¯ÀÀÆ÷¿ÉÒÔ×ÔÓÉÑ¡ÔñÊÇ·ñºöÂÔpreloadÊôÐÔËù±í´ïµÄÆ«ºÃ¡£µ«ÊÇ£¬Èç¹ûÐèÒªÏÞÖÆ´ø¿íµÄÏûºÄ£¬posterÊôÐÔ¿ÉÄܸüʤһЩ¡£

 

1.2 ÏÔʾռλͼÏñ

¿ÉÒÔÓÃposterÊôÐÔÏòÓû§³ÊÏÖÒ»ÕÅռλͼÏñ¡£ÕâÕÅͼÏñ»áÏÔʾÔÚÊÓÆµµÄλÖã¬Ö±ÖÁÓû§¿ªÊ¼²¥·Å¡£

ʹÓÃposterÊôÐÔÀ´Ö¸¶¨Õ¼Î»Í¼Ïñ> Video cannot be displayed

ÕâÀïΪÊÓÆµÎļþµÄµÚÒ»Ö¡×öÁËÒ»ÕÅÆÁÄ»½ØÍ¼£¬È»ºóÔÚËüÉÏÃæµþ¼ÓÁ˵¥´Ê Poster£¨º£±¨£©¡£ÕâÕÅͼÏñ°üÀ¨ÁËÊÓÆµ¿Ø¼þ£¬ÒÔ´ËÌáʾÓû§ÕâÕź£±¨´ú±íÒ»¶ÎÊÓÆµ¼ô¼­¡£ÕâÀﻹÔÚ´ËÀýÖмÓÈëÁËÒ»¸öimgÔªËØ£¬ÒÔÑÝʾvideoÔªËØ»á²»¼Ó¸Ä¶¯µØÕ¹Ê¾ÕâÕź£±¨Í¼Ïñ¡£

 

1.3 ÉèÖÃÊÓÆµ³ß´ç

Èç¹ûÊ¡ÂÔwidthºÍheightÊôÐÔ£¬ä¯ÀÀÆ÷¾Í»áÏÔʾһ¸öºÜСµÄÕ¼Î»ÔªËØ£¬²¢ÔÚÔªÊý¾Ý¿ÉÓÃʱ£¨Ò²¾ÍÊǵ±Óû§¿ªÊ¼²¥·Å£¬»òÕßpreloadÊôÐÔ±»ÉèΪmetadataʱ£©°ÑËüµ÷Õûµ½ÊÓÆµÔ­Ê¼³ß´çµÄ´óС¡£Õâ¿ÉÄÜ»á²úÉú²ü¶¯¸Ð£¬ÒòÎªÒ³Ãæ²¼¾ÖÐèÒªµ÷ÕûÒÔÈÝÄÉÊÓÆµ¡£

Èç¹ûÖ¸¶¨widthºÍheightÊôÐÔ£¬ä¯ÀÀÆ÷»á±£³ÖÊÓÆµµÄ³¤¿í±È£¨²»±Øµ£ÐÄÊÓÆµ»áÏòÈÎÒ»·½ÏòÀ­É죩¡£

Ó¦ÓÃwidthºÍheightÊôÐÔ video Video cannot be displayed

´ËÀýÖÐÉèÖõÄwidthÊôÐÔÓëheightÊôÐԵıÈÀýÊÇʧºâµÄ¡£ÕâÀﻹ¸øvideoÔªËØÓ¦ÓÃÁËÒ»¸öÑùʽ£¬ÒÔ͹ÏÔä¯ÀÀÆ÷ΪÁ˱£³ÖÊÓÆµµÄ³¤¿í¸ß£¬Ö»»áʹÓò¿·ÖÖ¸Åɸø¸ÃÔªËØµÄ¿Õ¼ä¡£

 

1.4 Ö¸¶¨ÊÓÆµÀ´Ô´£¨ºÍ¸ñʽ£©

Ö¸¶¨ÊÓÆµ×î¼òµ¥µÄ·½Ê½ÊÇʹÓà src ÊôÐÔ£¬²¢ÌṩËùÐèÊÓÆµÎļþµÄURL¡£

¿ÉÒÔ¿´µ½Ç°ÃæµÄÀý×ÓÖУ¬ÓÃsrcÊôÐÔÖ¸¶¨ÁËÎļþ timessquare.webm¡£ÕâÊÇÒ»¸öÓÃWebM ¸ñʽ±àÂëµÄÎļþ¡£Ä¿Ç°»¹Ã»ÓÐÄÄÒ»ÖÖÊÓÆµ¸ñʽ±»ÆÕ±éÖ§³Ö£¬Èç¹ûÏ뽫ÊÓÆµÍÆÏò¸÷ÖÖ¸÷ÑùµÄHTML5Óû§£¬¾ÍÒª×öºÃÒÔ¶àÖÖ¸ñʽ±àÂëÊÓÆµµÄ×¼±¸¡£

Ò»¸ö²»ÐÒµÄÊÂʵÊÇ£¬Ã»ÓÐÄÄÒ»ÖÖ¸ñʽÄܹ»ÓÃÓÚËùÓеÄÖ÷Á÷ä¯ÀÀÆ÷¡£Òò´Ë£¬±ØÐëÒÔ¶àÖÖ¸ñʽ±àÂëÊÓÆµ£¬Ö±µ½³öÏÖͬһһÖÖ¸ñʽΪֹ¡£¿ÉÒÔʹÓÃsourceÔªËØÀ´Ö¸¶¨¶à¸ö¸ñʽ¡£

ÏÂÃæÀý×ÓչʾÁËÈçºÎʹÓà sourceÔªËØÀ´Ïòä¯ÀÀÆ÷Ìṩ±¸Ñ¡ÊÓÆµ¸ñʽ¡£

ÓÃsourceÔªËØ Video cannot be displayed

ä¯ÀÀÆ÷»áÑØ×ÅÁбí˳ÐòѰÕÒËüÄܹ»²¥·ÅµÄÊÓÆµÎļþ¡£Õâ¿ÉÄÜ»áÒý·¢¶à¸ö·þÎñÆ÷ÇëÇóÒÔ»ñµÃÿ¸öÎļþµÄ¶îÍâÐÅÏ¢¡£ä¯ÀÀÆ÷ÅжÏËüÊÇ·ñÄܲ¥·Åij¸öÊÓÆµµÄÒÀ¾ÝÖ®Ò»ÊÇ·þÎñÆ÷·µ»ØµÄMIMEÀàÐÍ¡£¿ÉÒÔͨ¹ý¸øsourceÔªËØÓ¦ÓÃtypeÊôÐÔÀ´ÌáʾÓû§£¬·½·¨ÊÇÔÚÆäÖÐÖ¸¶¨ÎļþµÄMIMEÀàÐÍ¡£

ÔÚsourceÔªËØÉÏÓ¦ÓÃtypeÊôÐÔ /> Video cannot be displayed

PS:mediaÊôÐÔÏòä¯ÀÀÆ÷Ö¸Ã÷¸ÃÊÓÆµ×îÊʺÏÔÚÄÇÖÖÉ豸Éϲ¥·Å¡£

 

2. ʹÓà audio ÔªËØ

audio ÔªËØÔÊÐíÔÚHTMLÎĵµÀïǶÈëÒôƵÄÚÈÝ¡£

¿ÉÒÔ¿´µ½audioºÍvideoÔªËØÓÐÐí¶à¹²Í¬µã¡£ÏÂÃæµÄÀý×ÓչʾÁËaudioÔªËØµÄÓ÷¨¡£

ʹÓÃaudioÔªËØ Audio content cannot be played

Ò²¿ÉÒÔʹÓÃsourceÔªËØÀ´Ìṩ¶àÖÖ¸ñʽ¡£

ʹÓÃaudioÔªËØ Audio content cannot be played

ÕâÁ½¸öÀý×Ó¶¼Ê¹ÓÃÁËcontrolsÊôÐÔ£¬ÕâÑùä¯ÀÀÆ÷¾Í»á¶ÔÓû§ÏÔʾĬÈϵIJ¥·Å¿Ø¼þ¡£ËüÃÇÔÚ²»Í¬µÄä¯ÀÀÆ÷ÖÐÍâ¹Û¸÷Ò죬ÏÂÃæÊÇÔÚ»ðºüä¯ÀÀÆ÷ÖеÄÏÔʾЧ¹û£º

 

3. ͨ¹ý DOM ²Ù×÷ǶÈëʽýÌå

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎ×ªÔØµÄ¸å¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬Çë×ªÔØÊ±Îñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • Html5ÍÏ×§¸´ÖÆ - Çë½ÐÎÒÍ·Í·¸ç

    Html5ÍÏ×§¸´ÖÆ - Çë½ÐÎÒÍ·Í·¸ç

    2016-10-02 16:00

  • ʹÓÃÇ©ÃûÀ´±£Ö¤ASP.NET MVC OR WEBAPIµÄ½Ó¿Ú°²È« - Agile.Zhou

    ʹÓÃÇ©ÃûÀ´±£Ö¤ASP.NET MVC OR WEBAPIµÄ½Ó¿Ú°²È« - Agile.Zhou

    2016-09-24 17:00

  • html5 video.js ʹÓü°¼æÈÝËùÓÐä¯ÀÀÆ÷ - Сͯͯ

    html5 video.js ʹÓü°¼æÈÝËùÓÐä¯ÀÀÆ÷ - Сͯͯ

    2016-09-24 15:00

  • Canvas¡ª¡ªÊ¹Óö¨Ê±Æ÷Ä£Ä⶯̬¼ÓÔØ¶¯»­£¡ - li_han

    Canvas¡ª¡ªÊ¹Óö¨Ê±Æ÷Ä£Ä⶯̬¼ÓÔØ¶¯»­£¡ - li_han

    2016-09-23 15:00

ÍøÓѵãÆÀ
á