{"id":10847,"date":"2013-10-18T16:38:00","date_gmt":"2013-10-18T16:38:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/10\/18\/code-nhung-video-trong-html5\/"},"modified":"2013-10-18T16:38:00","modified_gmt":"2013-10-18T16:38:00","slug":"code-nhung-video-trong-html5","status":"publish","type":"post","link":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/","title":{"rendered":"Code nh\u00fang video trong HTML5"},"content":{"rendered":"\n<p>HTML5 cho ph\u00e9p ch\u00fang ta nh\u00fang video v\u00e0o trang web r\u1ed3i xem tr\u1ef1c ti\u1ebfp tr\u00ean tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i s\u1eed d\u1ee5ng plugin c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Adobe Flash Player.\u00a0H\u00f4m nay Blog Ki\u1ebfn c\u00e0ng s\u1ebd c\u00f9ng b\u1ea1n xem code nh\u00fang n\u00e0y c\u1ee5 th\u1ec3 nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<div style=\"text-align: center;\"><video poster=\"https:\/\/4.bp.blogspot.com\/-1K8jV8CE3LU\/UmFtoRAZhYI\/AAAAAAAACvI\/rGOI3zLUZQg\/s320\/poster.png\" controls=\"controls\" width=\"550\" height=\"150\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4\" type=\"video\/mp4\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.webm\" type=\"video\/webm\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.ogv\" type=\"video\/ogg\"><\/video><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video width=\"640\" height=\"480\" controls posster=\"images\/poster.png\">\n\n&lt;source src=\"freehostpage.mp4\" type=\"video\/mp4\">\n\n&lt;source src=\"freehostpage.ogg\" type=\"video\/ogg\">\n\nTr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 th\u1ebb video\n\n&lt;\/video><\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch code:<\/p>\n\n\n\n<ul><li>\u0110\u1ec3 nh\u00fang video ch\u00fang ta b\u1eaft \u0111\u1ea7u b\u1eb1ng th\u1ebb m\u1edf &lt;video> v\u00e0 k\u1ebft th\u00fac b\u1eb1ng th\u1ebb \u0111\u00f3ng &lt;\/video><\/li><li><strong>width<\/strong>\u00a0v\u00e0\u00a0<strong>height<\/strong>\u00a0quy \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a video.<\/li><li><strong>controls<\/strong>\u00a0l\u00e0m xu\u1ea5t hi\u1ec7n n\u00fat Play (b\u1eadt video), Pause (t\u1ea1m d\u1eebng), t\u00f9y ch\u1ecdn to\u00e0n m\u00e0n h\u00ecnh v\u00e0 n\u00fat \u0111i\u1ec1u khi\u1ec3n \u00e2m thanh.<\/li><li>Ngu\u1ed3n video \u0111\u1eb7t trong th\u1ebb\u00a0<strong>source<\/strong>, v\u1edbi \u0111\u01b0\u1eddng d\u1eabn c\u1ee5 th\u1ec3 \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh trong thu\u1ed9c t\u00ednh\u00a0<strong>src<\/strong>, tr\u00ecnh duy\u1ec7t d\u1ef1a v\u00e0o thu\u1ed9c t\u00ednh\u00a0<strong>type<\/strong>\u00a0\u0111\u1ec3 bi\u1ebft \u0111\u1ecbnh d\u1ea1ng c\u1ee7a video.<\/li><li>C\u00f3 3 \u0111\u1ecbnh d\u1ea1ng video \u0111\u01b0\u1ee3c c\u00e1c tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 l\u00e0:\u00a0<strong>mp4, ogg\u00a0<\/strong>v\u00e0<strong>\u00a0webm<\/strong>. Tuy nhi\u00ean kh\u00f4ng ph\u1ea3i tr\u00ecnh duy\u1ec7t n\u00e0o c\u0169ng h\u1ed7 tr\u1ee3 c\u1ea3 3, c\u00f3 tr\u00ecnh duy\u1ec7t ch\u1ec9 h\u1ed7 tr\u1ee3 1 \u0111\u1ecbnh d\u1ea1ng duy nh\u1ea5t.<\/li><li>D\u00f2ng cu\u1ed1i c\u00f9ng s\u1ebd xu\u1ea5t hi\u1ec7n trong tr\u01b0\u1eddng h\u1ee3p tr\u00ecnh duy\u1ec7t kh\u00f4ng h\u1ed7 tr\u1ee3 th\u1ebb video, th\u00ed d\u1ee5 IE8. H\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn g\u1ed3m:\u00a0<strong>Google Chrome, FireFox, Opera, Safari\u00a0<\/strong>v\u00e0<strong>\u00a0IE9+<\/strong>\u00a0\u0111\u1ec1u c\u00f3 h\u1ed7 tr\u1ee3 th\u1ebb video<\/li><li>Thu\u1ed9c t\u00ednh poster d\u00f9ng \u0111\u1ec3 l\u00e0m \u1ea3nh n\u1ec1n cho video, th\u00ed d\u1ee5 video \u1edf \u0111\u1ea7u b\u00e0i s\u1eed d\u1ee5ng poster l\u00e0 b\u1ee9c \u1ea3nh d\u01b0\u1edbi \u0111\u00e2y:<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"225\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/poster.png\" alt=\"\" class=\"wp-image-12596\" srcset=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/poster.png 400w, https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/poster-300x169.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Tr\u00ecnh duy\u1ec7t<\/th><th>MP4<\/th><th>WebM<\/th><th>Ogg<\/th><\/tr><tr><td>Internet Explorer<\/td><td>C\u00f3<\/td><td>Kh\u00f4ng<\/td><td>Kh\u00f4ng<\/td><\/tr><tr><td>Chrome<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><\/tr><tr><td>Firefox<\/td><td>C\u00f3 (FireFox 21+)<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><\/tr><tr><td>Safari<\/td><td>C\u00f3<\/td><td>Kh\u00f4ng<\/td><td>Kh\u00f4ng<\/td><\/tr><tr><td>Opera<\/td><td>Kh\u00f4ng<\/td><td>C\u00f3<\/td><td>C\u00f3<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Ngo\u00e0i ra ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng Javascript \u0111\u1ec3 \u0111i\u1ec1u khi\u1ec3n b\u1eadt, t\u1eaft, thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc video nh\u01b0 v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">T\u00f9y ch\u1ecdn movie<\/h3>\n\n\n\n<div><button>Play\/Pause<\/button><button>250<\/button><button>400<\/button><button>550<\/button><\/div>\n\n\n\n<p><video width=\"250\" height=\"150\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4\" type=\"video\/mp4\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.webm\" type=\"video\/webm\"><source src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.ogv\" type=\"video\/ogg\"><\/video><br>Theo \u0111\u00f3:<\/p>\n\n\n\n<ul><li>Tr\u01b0\u1edbc ti\u00ean video \u0111\u01b0\u1ee3c g\u00e1n m\u1ed9t <b>id<\/b> c\u1ee5 th\u1ec3, trong v\u00ed d\u1ee5 n\u00e0y l\u00e0 myvideo<\/li><li>Video s\u1ebd \u0111\u01b0\u1ee3c l\u1ea5y b\u1eb1ng l\u1ec7nh <b>document.getElemnetById(&#8220;myvideo&#8221;)<\/b><\/li><li>Sau \u0111\u00f3 video n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c \u0111i\u1ec1u khi\u1ec3n th\u00f4ng qua c\u00e1c l\u1ec7nh <b>video.pause()<\/b>, <b>video.play()<\/b>, <b>video.width<\/b>=&#8221;xyz&#8221; , v\u1edbi xyz l\u00e0 gi\u00e1 tr\u1ecb c\u1ee5 th\u1ec3 n\u00e0o \u0111\u00f3. C\u00e1c l\u1ec7nh n\u00e0y \u0111\u01b0\u1ee3c l\u1ed3ng trong c\u00e1c h\u00e0m.<\/li><li>C\u00e1c button t\u01b0\u01a1ng \u1ee9ng khi \u0111\u01b0\u1ee3c nh\u1ea5n s\u1ebd g\u1ecdi c\u00e1c h\u00e0m n\u00e0y l\u00ean b\u1eb1ng l\u1ec7nh <b>onclick<\/b>, v\u00ed d\u1ee5:&nbsp;<i>&lt;button onclick=&#8221;play();&#8221;&gt;Ch\u1ea1y&lt;\/button&gt; <\/i>s\u1ebd g\u1ecdi h\u00e0m <b>play()<\/b> v\u00e0 ch\u1ea1y video n\u00e0y.<\/li><\/ul>\n\n\n\n<p>Code c\u1ee5 th\u1ec3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div>\n&lt;button onclick=\"playPause();\">Play\/Pause&lt;\/button>\n&lt;button onclick=\"size250();\">250&lt;\/button>\n&lt;button onclick=\"size400();\">400&lt;\/button>\n&lt;button onclick=\"size550();\">550&lt;\/button>\n&lt;\/div>\n&lt;video id=\"myvideo\" width=\"250\">\n      &lt;source id=\"mp4\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4\" type=\"video\/mp4\">&lt;\/source>\n      &lt;source id=\"webm\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.webm\" type=\"video\/webm\">&lt;\/source>\n      &lt;source id=\"ogv\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.ogv\" type=\"video\/ogg\">&lt;\/source>\n&lt;\/video>\n&lt;script type=\"text\/javascript\">\nvar video = document.getElementById(\"myvideo\");\nfunction playPause()\n{ \nif (video.paused) \nvideo.play(); \nelse \nvideo.pause(); \n}\n\nfunction size250()\n{video.width = 250;}\n\nfunction size400()\n{video.width = 400;}\n\nfunction size550()\n{video.width = 550;} \n&lt;\/script>  <\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 cho ph\u00e9p ch\u00fang ta nh\u00fang video v\u00e0o trang web r\u1ed3i xem tr\u1ef1c ti\u1ebfp tr\u00ean tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i s\u1eed d\u1ee5ng plugin c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Adobe Flash Player.\u00a0H\u00f4m nay Blog Ki\u1ebfn c\u00e0ng s\u1ebd c\u00f9ng b\u1ea1n xem code nh\u00fang n\u00e0y c\u1ee5 th\u1ec3 nh\u01b0 th\u1ebf n\u00e0o. V\u00ed d\u1ee5: Code m\u1eabu: Gi\u1ea3i th\u00edch code: &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[235,236],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Code nh\u00fang video trong HTML5 &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code nh\u00fang video trong HTML5 &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"HTML5 cho ph\u00e9p ch\u00fang ta nh\u00fang video v\u00e0o trang web r\u1ed3i xem tr\u1ef1c ti\u1ebfp tr\u00ean tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i s\u1eed d\u1ee5ng plugin c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Adobe Flash Player.\u00a0H\u00f4m nay Blog Ki\u1ebfn c\u00e0ng s\u1ebd c\u00f9ng b\u1ea1n xem code nh\u00fang n\u00e0y c\u1ee5 th\u1ec3 nh\u01b0 th\u1ebf n\u00e0o. V\u00ed d\u1ee5: Code m\u1eabu: Gi\u1ea3i th\u00edch code: &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-18T16:38:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/poster.png\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code nh\u00fang video trong HTML5 &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/","og_locale":"vi_VN","og_type":"article","og_title":"Code nh\u00fang video trong HTML5 &#8226; Ki\u1ebfn c\u00e0ng","og_description":"HTML5 cho ph\u00e9p ch\u00fang ta nh\u00fang video v\u00e0o trang web r\u1ed3i xem tr\u1ef1c ti\u1ebfp tr\u00ean tr\u00ecnh duy\u1ec7t m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i s\u1eed d\u1ee5ng plugin c\u1ee7a b\u00ean th\u1ee9 ba nh\u01b0 Adobe Flash Player.\u00a0H\u00f4m nay Blog Ki\u1ebfn c\u00e0ng s\u1ebd c\u00f9ng b\u1ea1n xem code nh\u00fang n\u00e0y c\u1ee5 th\u1ec3 nh\u01b0 th\u1ebf n\u00e0o. V\u00ed d\u1ee5: Code m\u1eabu: Gi\u1ea3i th\u00edch code: &hellip;","og_url":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-10-18T16:38:00+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2021\/02\/poster.png"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/","url":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/","name":"Code nh\u00fang video trong HTML5 &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-10-18T16:38:00+00:00","dateModified":"2013-10-18T16:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/code-nhung-video-trong-html5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/code-nhung-video-trong-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Code nh\u00fang video trong HTML5"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/10847"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=10847"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/10847\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=10847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=10847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=10847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}