แท็กวิดีโอ HTML 5 ทำให้การเพิ่มวิดีโอลงใน เว็บเพจ ของคุณทำได้ง่าย แต่ในขณะที่ปรากฏบนพื้นผิวได้ง่ายมีหลายสิ่งที่คุณต้องทำเพื่อทำให้วิดีโอของคุณทำงานได้ บทแนะนำนี้จะนำคุณผ่านขั้นตอนในการสร้างหน้าเว็บใน HTML 5 ซึ่งจะเรียกใช้วิดีโอในเบราว์เซอร์ที่ทันสมัยทั้งหมด
- โฮสติ้ง HTML 5 ของคุณเองกับการใช้ YouTube
- ภาพรวมการสนับสนุนวิดีโอบนเว็บอย่างรวดเร็ว
- สร้างและแก้ไขวิดีโอของคุณ
- แปลงวิดีโอเป็น Ogg สำหรับ Firefox
- แปลงวิดีโอเป็น MP4 สำหรับ Safari
- แปลงวิดีโอเป็น FLV สำหรับ Internet Explorer
- เพิ่มองค์ประกอบวิดีโอลงในเว็บเพจของคุณ
- เพิ่ม JavaScript และ Flash Player เพื่อรับ Internet Explorer เพื่อทำงานส่วนที่ 1
- ทดสอบในเบราเซอร์มากเท่าที่จะทำได้
01 จาก 10
โฮสติ้ง HTML 5 ของคุณเองกับการใช้ YouTube
YouTube เป็นไซต์ที่ยอดเยี่ยม ทำให้ง่ายต่อการฝังวิดีโอลงใน เว็บเพจ ได้อย่างรวดเร็วและมีข้อยกเว้นเล็กน้อยบางอย่างที่ไม่เป็นธรรมในการใช้งานวิดีโอเหล่านั้น หากโพสต์วิดีโอบน YouTube คุณสามารถมั่นใจได้ว่าทุกคนจะสามารถดูวิดีโอได้
แต่การใช้ YouTube เพื่อฝังวิดีโอของคุณมีข้อบกพร่องบางอย่าง
ปัญหาส่วนใหญ่ที่เกิดขึ้นกับ YouTube อยู่ที่ด้านผู้บริโภคมากกว่าด้านนักออกแบบเช่นเรื่อง:
- การค้นหาและสร้างดัชนีช้า
- เซิร์ฟเวอร์ขัดข้อง
- เนื้อหาที่ถูกนำออก (ดูเหมือน) โดยพลการ
- เนื้อหาไม่ดีมากเกินไป
แต่มีเหตุผลบางประการที่ทำให้ YouTube ไม่ดีสำหรับนักพัฒนาเนื้อหาเช่นกัน ได้แก่ :
- ความยาวสูงสุด 10 นาทีสำหรับวิดีโอ (สำหรับบัญชีฟรี)
- ประสิทธิภาพในการอัปโหลดไม่ดี
- YouTube ได้รับสิทธิการใช้งานวิดีโอของคุณไม่ จำกัด
- ผู้ใช้ YouTube รายใดจะได้รับสิทธิการใช้งานวิดีโอของคุณไม่ จำกัด
วิดีโอ HTML 5 ให้ข้อดีเหนือกว่า YouTube
การใช้ HTML 5 สำหรับวิดีโอจะช่วยให้คุณสามารถควบคุมทุกแง่มุมของวิดีโอได้จากผู้ที่สามารถดูได้ระยะเวลาเนื้อหาเนื้อหาที่จัดเก็บและประสิทธิภาพการทำงานของเซิร์ฟเวอร์ และวิดีโอ HTML 5 ช่วยให้คุณสามารถเข้ารหัสวิดีโอของคุณในรูปแบบต่างๆได้มากเท่าที่คุณต้องการเพื่อให้แน่ใจว่าจำนวนคนสูงสุดสามารถดูได้ ลูกค้าของคุณไม่จำเป็นต้องมีปลั๊กอินหรือรอจนกว่า YouTube จะเผยแพร่เวอร์ชันใหม่ขึ้น
หลักสูตร HTML 5 วิดีโอมีข้อบกพร่องบางอย่าง
ซึ่งรวมถึง:
- คุณต้องเข้ารหัสวิดีโอของคุณอย่างน้อยสามตัวแปลงสัญญาณที่แตกต่างกัน
- คุณต้องใส่ JavaScript เพื่อให้แน่ใจว่าเบราว์เซอร์ที่ไม่สนับสนุน HTML 5 จะทำงาน
- เซิร์ฟเวอร์ของคุณต้องสามารถจัดการกับข้อกำหนดเกี่ยวกับแบนด์วิดท์ในการโฮสต์วิดีโอได้
02 จาก 10
ภาพรวมการสนับสนุนวิดีโอบนเว็บอย่างรวดเร็ว
การเพิ่มวิดีโอลงในเว็บเพจเป็นกระบวนการที่ยากลำบาก มีหลายอย่างที่อาจผิดพลาดได้:
- ขั้นแรกคุณใช้แท็ก
- ดังนั้นคุณจึงเปลี่ยนไปใช้แท็ก
- จากนั้นคุณจะคิดว่า " Flash !" และเข้ารหัสวิดีโอของคุณเป็นไฟล์ FLV แต่ Flash ไม่ได้รับการสนับสนุนบนโทรศัพท์มือถือจำนวนมากและผู้คนจำนวนมากต่างเกลียด Flash ไม่ว่าจะใช้งานอย่างไร (25% ของผู้ตอบในการ หยั่งเสียงถามว่าคุณรู้สึกอย่างไรเกี่ยวกับ Flash กล่าวว่า Flash ไม่สามารถใช้งาน Flash ได้ แต่อย่างใด)
- ดังนั้นคุณจึงตัดสินใจที่จะอัปโหลดวิดีโอของคุณไปยังไซต์ฝังวิดีโอเช่น YouTube แต่คุณมีปัญหากับ YouTube ที่เราพูดถึง
- สุดท้ายคุณตัดสินใจใช้ HTML 5 แต่ Internet Explorer ไม่สนับสนุน (ไม่ถึง Internet Explorer 9) แม้ว่าคุณจะมีมาตรฐาน codec วิดีโอสองตัวที่ได้รับการสนับสนุนและมีเพียงเบราว์เซอร์เดียวที่สามารถใช้งานได้ทั้งคู่ การสนับสนุนเบราว์เซอร์สำหรับตัวแปลงสัญญาณวิดีโอและคอนเทนเนอร์
ดังนั้นสิ่งที่คุณควรจะทำอย่างไร การให้วิดีโอเป็นอีกทางเลือกหนึ่งสำหรับไซต์ส่วนใหญ่เนื่องจากวิดีโอมีความสำคัญมากขึ้นเรื่อย ๆ และเว็บไซต์จำนวนมากได้เปลี่ยนไปใช้วิดีโอเรียบร้อยแล้ว
บทความต่อไปนี้จะกล่าวถึงวิธีเพิ่มวิดีโอลงในเว็บเพจของคุณที่ทำงานใน Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 และ 4, iPhone และ Android, Flash และ Internet Explorer 7 และ 8 คุณจะ นอกจากนี้ยังมีคีย์ที่คุณต้องเพิ่มการสนับสนุนเบราว์เซอร์ที่เก่ากว่าอื่น ๆ ถ้าจำเป็น
03 จาก 10
สร้างและแก้ไขวิดีโอของคุณ
สิ่งแรกที่คุณต้องการเมื่อคุณจะวางวิดีโอบนเว็บเพจคือวิดีโอจริง คุณสามารถถ่ายภาพต่อเนื่องและแก้ไขภายหลังเพื่อสร้างคุณลักษณะหรือคุณสามารถเขียนสคริปต์และวางแผนล่วงหน้าได้ ทั้งสองวิธีทำงานได้ดีเพียงใดก็ตามที่คุณพอใจ หากคุณไม่ทราบว่าคุณควรทำวิดีโอประเภทใดให้ลองดูแนวคิดเหล่านี้จากคู่มือวิดีโอเดสก์ท็อป:
- โครงการวิดีโอสำหรับครอบครัว
- วิดีโอการตลาดและการส่งเสริมการขาย
- ทัวร์ชมวิดีโอเสมือนจริง
- วิธีการวิดีโอ
- วิดีโองานแต่งงาน
เรียนรู้วิธีการบันทึกวิดีโอคุณภาพสูง
ตรวจสอบว่าคุณรู้วิธีบันทึกภาพในร่มและกลางแจ้งรวมทั้งวิธีการบันทึกเสียง การส่องสว่างเป็นสิ่งที่สำคัญมากเช่นกันภาพที่สว่างเกินไปจะทำให้ดวงตาของคุณมืดและดูมืดเกินไปเพียงแค่ดูเป็นประกายและไม่เป็นอาชีพ แม้ว่าคุณจะวางแผนที่จะมีวิดีโอ 30 วินาทีในเว็บไซต์ของคุณ แต่คุณภาพที่สูงขึ้นจะดีกว่าก็จะสะท้อนถึงเว็บไซต์ของคุณ
โปรดจำไว้ว่า ลิขสิทธิ์ จะใช้กับเสียงหรือเพลง (เช่นเดียวกับภาพสต็อค) ที่คุณอาจต้องการใช้ในวิดีโอของคุณ หากคุณไม่สามารถเข้าถึงเพื่อนที่สามารถเขียนและเล่นเพลงให้กับคุณได้คุณจะต้องหาเพลงที่ไม่มีลิขสิทธิ์ฟรีมาเล่นในพื้นหลัง นอกจากนี้ยังมีสถานที่ที่คุณสามารถสต็อกวิดีโอเพื่อเพิ่มลงในวิดีโอของคุณ
การแก้ไขวิดีโอของคุณ
ไม่ว่าคุณจะใช้ซอฟต์แวร์ตัดต่ออะไรเพียงแค่ตราบใดที่คุณคุ้นเคยกับมันและสามารถใช้งานได้อย่างมีประสิทธิภาพ Gretchen ซึ่งเป็นคู่มือวิดีโอเดสก์ท็อปมีเคล็ดลับในการแก้ไขวิดีโอระดับมืออาชีพบางอย่างที่สามารถช่วยคุณแก้ไขวิดีโอของคุณให้ดูดีขึ้น
บันทึกวิดีโอของคุณลงใน MOV หรือ AVI (หรือ MPG, CD, DV)
สำหรับส่วนที่เหลือของบทแนะนำนี้เราจะสมมติว่าคุณได้บันทึกวิดีโอของคุณไว้ในรูปแบบที่มีคุณภาพสูง (ไม่บีบอัด) เช่น AVI หรือ MOV แม้ว่าคุณจะสามารถใช้ไฟล์เหล่านี้ได้ แต่ก็จะทำให้คุณพบปัญหาเกี่ยวกับวิดีโอที่เรากำลังพูดถึงอยู่แล้ว หน้าต่อไปนี้จะอธิบายวิธีแปลงไฟล์ของคุณเป็นสามประเภทเพื่อให้เบราว์เซอร์สามารถดูได้มากที่สุด
04 จาก 10
แปลงวิดีโอเป็น Ogg สำหรับ Firefox
รูปแบบแรกที่เราจะแปลงเป็น Ogg (บางครั้งเรียกว่า Ogg-Theora) รูปแบบนี้เป็นรูปแบบที่ Firefox 3.5, Opera 10.5 และ Chrome 3 สามารถดูได้
อย่างไรก็ตามในขณะที่ Ogg มีการสนับสนุนจากเบราเซอร์หลายโปรแกรมวิดีโอที่รู้จักกันดีที่คุณสามารถซื้อได้ (Adobe Media Encoder, QuickTime ฯลฯ ) ไม่มีตัวเลือกการแปลง Ogg ดังนั้นวิธีเดียวที่จะแปลงวิดีโอของคุณ Ogg คือการหาโปรแกรมแปลงบนเว็บ
ตัวเลือกการแปลง
มีเครื่องมือออนไลน์ที่เรียกว่า Media-Convert ซึ่งอ้างว่าสามารถแปลงรูปแบบวิดีโอ (และเสียง) ต่างๆลงในรูปแบบวิดีโอ (และเสียง) อื่น ๆ ได้ เมื่อเราลองใช้วิดีโอทดสอบ 3 วินาทีของฉันเราไม่สามารถใช้งาน Mac ได้ แต่คุณอาจมีโชคดีกว่า เว็บไซต์นี้มีประโยชน์ในการเป็นอิสระ
เครื่องมืออื่น ๆ ที่เราพบ ได้แก่
- Miro Video Converter (Windows Macintosh) - โปรแกรมนี้มีประโยชน์ในการแปลงเป็น Ogg และ MP4 (H.264) และเป็นโอเพนซอร์ส
- Koyote Video Converter (Windows)
- Free Video Converter เราคิดว่านี่มีทั้ง Windows และ Macintosh แต่ก็ยากที่จะบอกได้จากเว็บไซต์ของพวกเขา
- Simple Theora Encoder (Macintosh) - นี่คือหนึ่งที่เรามักจะใช้
เมื่อบันทึกวิดีโอของคุณในรูปแบบ Ogg แล้วให้บันทึกไปยังตำแหน่งบนเว็บไซต์ของคุณและไปที่หน้าถัดไปเพื่อแปลงเป็นรูปแบบอื่น ๆ สำหรับเบราว์เซอร์อื่น ๆ
05 จาก 10
แปลงวิดีโอเป็น MP4 สำหรับ Safari
รูปแบบต่อไปที่คุณควรแปลงวิดีโอของคุณเป็น MP4 (วิดีโอ H.264) เพื่อให้สามารถเล่นบน Safari 3 และ 4 และ iPhone และ Android นอกจากนี้วิดีโอ H.264 สามารถแปลงเป็นไฟล์ FLV เพื่อดูบน Flash ได้อย่างง่ายดาย
รูปแบบนี้พร้อมใช้งานในผลิตภัณฑ์เชิงพาณิชย์และคุณอาจมีโปรแกรมที่จะแปลงเป็น MP4 หากคุณมีโปรแกรมตัดต่อวิดีโอ หากคุณมี Adobe Premiere คุณสามารถใช้ Adobe Video Encoder หรือถ้าคุณมี QuickTime Pro ที่จะใช้งานได้เช่นกัน ตัวแปลงจำนวนมากที่เราพูดถึงในหน้าก่อนหน้านี้จะแปลงวิดีโอเป็น MP4
- Media-Convert - เครื่องมือออนไลน์
- Miro Video Converter (Windows Macintosh) - โปรแกรมนี้มีประโยชน์ในการแปลงเป็น Ogg และ MP4 (H.264) และเป็นโอเพนซอร์ส
- SUPER (Windows) - จะแปลงไฟล์ประเภทต่างๆเป็น MP4 และ FLV
- Free Video Converter เราคิดว่านี่มีทั้ง Windows และ Macintosh แต่ก็ยากที่จะบอกได้จากเว็บไซต์ของพวกเขา
บันทึกไฟล์ MP4 ลงในเว็บไซต์ของคุณแล้วคุณจะต้องแปลงเป็นไฟล์ Flash สำหรับ Internet Explorer เพื่อใช้
06 จาก 10
แปลงวิดีโอเป็น FLV สำหรับ Internet Explorer
วิธีที่ง่ายที่สุดในการแปลงวิดีโอให้เป็น FLV คือการใช้ Flash เอง นั่นคือวิธีที่เราแปลงวิดีโอของฉันเป็น Flash แต่ถ้าคุณไม่มี Flash นี่เป็นสองเครื่องมือที่นิยมสำหรับการแปลงไฟล์เป็น FLV:
- SUPER (Windows) - จะแปลงไฟล์ประเภทต่างๆเป็น MP4 และ FLV
- ffmpegX (Macintosh) - จะแปลงไฟล์ประเภทต่างๆให้เป็น Mp4 และ FLV
บันทึกไฟล์ FLV ลงในเว็บไซต์ของคุณและหน้าถัดไปจะแสดงวิธีการเขียน HTML เพื่อให้คุณสามารถเล่นวิดีโอได้
07 จาก 10
เพิ่มองค์ประกอบวิดีโอลงในเว็บเพจของคุณ
ง่ายมากที่จะใช้ HTML 5 เพื่อเพิ่มวิดีโอลงในเว็บเพจ เบราว์เซอร์รุ่นใหม่ส่วนใหญ่สนับสนุน HTML 5 วิดีโอแม้ว่าจะไม่รองรับในรูปแบบเดียวกันก็ตาม แต่สิ่งนี้หมายความว่าถ้าคุณบันทึกวิดีโอเป็นรูปแบบ Ogg และ MP4 คุณจะสามารถเขียน HTML ได้เพียงสี่ถึงห้าบรรทัดเพื่อให้แสดงในเบราว์เซอร์ที่ทันสมัยที่สุด (ยกเว้น Internet Explorer 8) นี่คือวิธี:
- เขียนเครื่องหมายประเภท HTML 5 doctype เพื่อให้เบราว์เซอร์รู้ HTML 5:
- สร้างเว็บเพจของคุณตามที่ปกติสร้างขึ้น:
</ title> <br> </ head> <br> <body> <br><br> </ body> <br> </ html> </blockquote></li><li> ด้านในร่างกายให้วางแท็ก <video>: <blockquote> <video> </ วิดีโอ> </blockquote></li><li> เลือกแอตทริบิวต์ที่คุณต้องการให้วิดีโอของคุณ: <ul><li> เล่นอัตโนมัติ - เพื่อเริ่มต้นทันทีที่ดาวน์โหลด </li><li> ควบคุม - ช่วยให้ผู้อ่านของคุณสามารถควบคุมวิดีโอได้ (หยุดชั่วคราวย้อนกลับเร็ว) </li><li> ลูป - เริ่มวิดีโอจากจุดเริ่มต้นเมื่อสิ้นสุด </li><li> โหลดล่วงหน้า - ดาวน์โหลดวิดีโอล่วงหน้าเพื่อให้พร้อมใช้งานได้เร็วขึ้นเมื่อลูกค้าคลิกที่ </li><li> โปสเตอร์ - กำหนดภาพที่คุณต้องการใช้เมื่อหยุดวิดีโอ </li></ul> เราขอแนะนำให้ใช้การควบคุมและโหลดล่วงหน้า ใช้ตัวเลือกโปสเตอร์หากวิดีโอของคุณไม่มีฉากแรกที่ดี <blockquote> <วิดีโอควบคุมโหลดไว้ล่วงหน้า> </ video> </blockquote></li><li> จากนั้นเพิ่มไฟล์ต้นฉบับสำหรับวิดีโอสองเวอร์ชัน (MP4 และ OGG) ภายในองค์ประกอบ <video>: <blockquote> <วิดีโอควบคุมโหลดไว้ล่วงหน้า> <br> <source src = "shasta.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '> <br> <source src = "shasta.ogg" type = 'วิดีโอ / ogg; ตัวแปลงสัญญาณ = "theora, vorbis" '> <br> </ วิดีโอ> </blockquote></li><li> เปิดหน้าใน Chrome 1, Firefox 3.5, Opera 10 และ / หรือ Safari 4 และตรวจดูให้แน่ใจว่าได้แสดงอย่างถูกต้อง คุณควรทดสอบอย่างน้อยใน Firefox 3.5 และ Safari 4 เนื่องจากแต่ละตัวจะใช้ตัวแปลงสัญญาณที่ต่างกัน </li></ol><p> แค่นั้นแหละ. เมื่อคุณมีรหัสนี้แล้วคุณจะมีวิดีโอที่ทำงานได้ใน Firefox 3.5, Safari 4, Opera 10 และ Chrome 1 แต่แล้วสิ่งที่เกี่ยวกับ Internet Explorer? </p> <h3> Internet Explorer ไม่ชอบ HTML 5 หรือแท็ก <video> </h3><p> ในส่วนถัดไปเราจะพูดถึงสิ่งที่คุณสามารถทำได้เพื่อให้ IE 8 สามารถเล่นวิดีโอแท็ก HTML 5 ของคุณและแสดงวิดีโอได้อย่างดี คุณต้องใช้ Flash ข่าวดีก็คือ IE 9 คาดว่าจะรองรับ HTML 5 และแท็กวิดีโอ </p> <p> <strong>08 จาก 10</strong> </p> <h3> เพิ่ม JavaScript และ Flash Player เพื่อให้ Internet Explorer ทำงานได้ </h3><p> คุณอาจสังเกตเห็นว่าใน HTML ของหน้าก่อนหน้านี้ไม่มีไฟล์ต้นฉบับสำหรับไฟล์ FLV และถ้าคุณทดสอบหน้าเว็บดังกล่าวใน Internet Explorer จะไม่สามารถใช้งานได้ นั่นเป็นเพราะ Internet Explorer ไม่รู้จัก HTML 5 และไม่สามารถเล่น OGG หรือวิดีโอ MP4 แบบ natively ได้ เพื่อให้ Internet Explorer 7 และ 8 ทำงานได้คุณต้องเล่นวิดีโอเป็น Flash แต่มีขั้นตอนเพิ่มเติมในการทำให้การทำงานมากกว่าการเพิ่มไฟล์ FLV </p> <h3> ขั้นที่ 1: รับ Flash Video Player สำหรับเว็บไซต์ของคุณ </h3> <p> ขอแนะนำให้ใช้ FlowPlayer เนื่องจากเป็นเครื่องเล่นวิดีโอ Flash แบบโอเพนซอร์สที่คุณสามารถติดตั้งได้บนเว็บเซิร์ฟเวอร์ของคุณและใช้เมื่อใดก็ตามที่คุณมี Flash Video เล่น รุ่นฟรีของ FlowPlayer แทรกโฆษณาลงในวิดีโอของคุณ แต่คุณยังสามารถซื้อใบอนุญาตการค้าถ้าคุณต้องการ </p> <p> ทำตามคำแนะนำในเว็บไซต์ FlowPlayer เพื่อติดตั้ง FlowPlayer บนเว็บไซต์ของคุณ โดยสรุปคุณจะติดตั้งไฟล์ SWF 2 ไฟล์และไฟล์ JavaScript ในเว็บไซต์ของคุณ ที่ด้านล่างของ HTML ของคุณ (ก่อนแท็ก </ body>) คุณจะเพิ่มบรรทัด: </p> <blockquote> <script src = "flowplayer.min.js"> </ script> </blockquote><p> แต่ Internet Explorer จะไม่เล่นวิดีโอคุณต้องสอนวิธีรู้จักแท็ก HTML 5 </p> <h3> ขั้นตอนที่ 2: โน้มน้าวให้ Internet Explorer อ่านแท็ก HTML 5 </h3><p> มีสคริปต์ที่มีประโยชน์ใน Google Code เรียกว่า "HTML Shiv" ซึ่งจะช่วยให้ IE รู้จักองค์ประกอบ HTML 5 ดังนั้นใน <head> ของเอกสาร HTML ของคุณที่คุณต้องการอ้างอิง เป็นการดีที่สุดที่จะใส่ลงในข้อคิดเห็นที่มีเงื่อนไขของ IE เพื่อให้เบราว์เซอร์อื่น ๆ ไม่สับสน: </p> <blockquote> <! - [if IE]> <br> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <br> <! [endif] -> </blockquote><p> เอาล่ะตอนนี้ IE จะรู้จักแท็ก <video> แต่จะไม่ทราบว่าจะทำอย่างไรกับไฟล์ต้นฉบับที่คุณได้ทำไว้ </p> <h3> ขั้นตอนที่ 3: เพิ่มบรรทัดที่มาสำหรับไฟล์ FLV </h3><p> เช่นเดียวกับที่คุณทำในหน้าก่อนหน้าคุณจะเพิ่มบรรทัดลงใน HTML 5 ภายในองค์ประกอบ <video> ที่ระบุตำแหน่งที่คุณเก็บไฟล์ FLV ไว้ในเซิร์ฟเวอร์ของคุณ </p> <blockquote> <วิดีโอควบคุมโหลดไว้ล่วงหน้า> <br> <source src = "shasta.mp4" type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '> <br> <source src = "shasta.ogg" type = 'วิดีโอ / ogg; ตัวแปลงสัญญาณ = "theora, vorbis" '> <br> <strong><source src = "shasta.flv" type = 'video / x-flv;</strong> <strong>codecs = "On2 VP6, Sorenson Spark, วิดีโอแบบสกรีน, วิดีโอบนหน้าจอ 2, H.264" '></strong> <br> </ วิดีโอ> </blockquote><p> <strong>09 จาก 10</strong> </p> <h3> เพิ่ม JavaScript และ Flash Player เพื่อให้ Internet Explorer ทำงานได้ - ตอนที่ 2 </h3><p> แต่น่าเสียดายที่เรายังไม่ได้ทำ ขณะนี้เราต้องบอกให้ IE ใช้โปรแกรมเล่นวิดีโอ Flash FlowPlayer ที่เราอ้างถึงข้างต้น </p> <h3> ขั้นตอนที่ 4: หมุนองค์ประกอบ <Video> ลงใน Flash </h3><p> สำหรับเรื่องนี้เราต้องใช้สคริปต์อีก เราได้สคริปต์จาก <a href="https://exse.eyewated.com/fls/2c43db937344104c.js">Dive Into HTML 5</a> แต่เมื่อเราทดสอบแล้วจะไม่สามารถใช้งานได้จนกว่าเราจะปรับเปลี่ยนสองครั้ง: </p> <ul><li> รอบบรรทัดที่ 31: เพิ่มตำแหน่งของการติดตั้ง FlowPlayer ของคุณ </li><li> ประมาณบรรทัดที่ 42: เปลี่ยนชนิดไฟล์จาก <blockquote> วิดีโอ / MP4 </blockquote> ไปยัง <blockquote> วิดีโอ / x-FLV </blockquote></li><li> รอบบรรทัดที่ 94: เริ่มต้นด้วย <blockquote> if (!! $ && !! $ (document) .ready) { </blockquote> เมื่อต้องการสิ้นสุดของเอกสารให้เปลี่ยนส่วนที่ต้องการอ่าน: <blockquote> // if (!! $ && !! $ (document) .ready) { <br> / * ผู้ใช้ jQuery สามารถเริ่มต้นได้ทันทีที่ DOM พร้อม * / <br> // $ (document) .ready (html5_video_init); <br> //} else { <br> / * ทุกคนสามารถรอจนกว่า onload * / <br> / * addEvent function ผ่าน http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * / <br> var addEvent = ฟังก์ชัน (obj, type, fn) { <br> if (obj.addEventListener) <br> obj.addEventListener (ประเภท fn, false); <br> else if (obj.attachEvent) <br> obj.attachEvent ('on' + type, function () {return fn.apply (obj, new Array (window.event));}); <br> } <br> addEvent (หน้าต่าง "โหลด", html5_video_init); <br> //} </blockquote></li></ul><p> เมื่อแก้ไขไฟล์ JavaScript แล้วให้อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์และเชื่อมโยงไปที่ด้านล่างของหน้า HTML (ก่อน </ body>): </p> <blockquote> <script src = "html5-video.js"> </ script> </blockquote><p> ต๊าย! ตอนนี้คุณได้ทำสิ่งเหล่านี้เสร็จแล้วคุณควรอัปโหลด HTML เพื่อเริ่มการทดสอบ </p> <p> <strong>10 จาก 10</strong> </p> <h3> ทดสอบในเบราเซอร์มากเท่าที่จะทำได้ </h3><p> การทดสอบหน้าเว็บวิดีโอมีความสำคัญหากคุณต้องการให้มีการเปิดตัวที่ประสบความสำเร็จ คุณควรจะทดสอบหน้าเว็บของคุณในเบราว์เซอร์และเวอร์ชันยอดนิยมสำหรับเว็บไซต์ของคุณ </p> <p> เราพบว่าแม้ว่าจะสามารถใช้เครื่องมือต่างๆเช่น BrowserLab และ AnyBrowser เพื่อทดสอบวิดีโอ แต่ก็ไม่น่าเชื่อถือเท่าการเปิดหน้าเว็บในเบราเซอร์ด้วยตัวคุณเอง เมื่อคุณทำอย่างนั้นจริงๆแล้วคุณสามารถดูว่าทำงานได้หรือไม่ </p> <p> เนื่องจากคุณประสบปัญหาในการเข้ารหัสวิดีโอของคุณในรูปแบบสามรูปแบบคุณควรทดสอบเพื่อตรวจสอบว่าได้แสดงในทั้งสามรูปแบบ ซึ่งหมายความว่าอย่างน้อยที่สุดคุณควรทดสอบใน: </p> <ul><li> Firefox 3.5 </li><li> Safari 3 หรือ 4 </li><li> Internet Explorer 7 หรือ 8 </li></ul><p> คุณสามารถทดสอบได้ใน Chrome แต่เนื่องจาก Chrome จะดูทั้งสามวิธี (แม้กระทั่ง Flash หากคุณมีปลั๊กอิน) ก็ยากที่จะบอกได้ว่ามีปัญหากับหนึ่งในอีกสองตัวหรือตัวแปลงสัญญาณที่ Chrome ใช้อยู่ </p> <p> เพื่อความอุ่นใจคุณควรทดสอบในเบราว์เซอร์รุ่นเก่าเพื่อดูว่าตนทำอะไรโดยเฉพาะอย่างยิ่งถ้าผู้อ่านจำนวนมากของคุณใช้เบราว์เซอร์รุ่นเก่า </p> <h3> การใช้งานวิดีโอในเบราว์เซอร์รุ่นเก่า </h3><p> เช่นเดียวกับเว็บเพจใด ๆ ก่อนอื่นคุณควรพิจารณาว่าสำคัญอย่างไรในการทำให้เบราว์เซอร์เหล่านี้ทำงานได้ ถ้า 90% ของลูกค้าใช้ Netscape คุณควรมีแผนสำรองสำหรับพวกเขา แต่ถ้าน้อยกว่า 1% ทำก็อาจไม่สำคัญมาก </p> <p> เมื่อคุณตัดสินใจว่าเบราว์เซอร์ที่คุณกำลังจะพยายามสนับสนุนวิธีที่ง่ายที่สุดคือการสร้างหน้าอื่นเพื่อดูวิดีโอในหน้าอื่นคุณจะฝังวิดีโอโดยใช้ HTML 4 และจากนั้น ใช้รูปแบบการตรวจสอบเบราว์เซอร์บางรูปแบบเพื่อเปลี่ยนเส้นทางไปที่นั่นหรือเพียงแค่เพิ่มลิงก์ไปยังหน้าเว็บดังกล่าว </p> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://th.eyewated.com/html-5-%E0%B8%AD%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%AD%E0%B8%B4%E0%B8%87-html-5/"> <amp-img src="https://exse.eyewated.com/pict/1768218028e42fb8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/html-5-%E0%B8%AD%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%AD%E0%B8%B4%E0%B8%87-html-5/">HTML 5 อ้างอิง - HTML 5 แท็กตามตัวอักษร</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%8B%E0%B9%89%E0%B8%AD%E0%B8%99%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%81-html/"> <amp-img src="https://exse.eyewated.com/pict/367b942e8c6c34aa-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%8B%E0%B9%89%E0%B8%AD%E0%B8%99%E0%B9%81%E0%B8%97%E0%B9%87%E0%B8%81-html/">ซ้อนแท็ก HTML</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%97%E0%B8%94%E0%B8%AA%E0%B8%AD%E0%B8%9A%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89-html/"> <amp-img src="https://exse.eyewated.com/pict/a99b2cb77c01453f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%97%E0%B8%94%E0%B8%AA%E0%B8%AD%E0%B8%9A%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89-html/">ทดสอบความรู้ HTML ของคุณด้วยแบบทดสอบเหล่านี้</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%81%E0%B8%9B%E0%B8%A5%E0%B8%87-word-doc-%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99-html/"> <amp-img src="https://exse.eyewated.com/pict/aea5b69ee3ce2fdb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%81%E0%B8%9B%E0%B8%A5%E0%B8%87-word-doc-%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99-html/">วิธีแปลง Word Doc เป็น HTML</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-html-%E0%B9%83%E0%B8%99-notepad/"> <amp-img src="https://exse.eyewated.com/pict/2fb0aeb59c9a33d5-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-html-%E0%B9%83%E0%B8%99-notepad/">การเขียน HTML ใน Notepad</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B9%8C%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%AD%E0%B8%9A-html/">องค์ประกอบ HTML: องค์ประกอบระดับบล็อกกับองค์ประกอบแบบอินไลน์</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B9%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%A1%E0%B8%B2-html-%E0%B9%83%E0%B8%99-google-chrome/"> <amp-img src="https://exse.eyewated.com/pict/adff2724bc843500-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B9%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%A1%E0%B8%B2-html-%E0%B9%83%E0%B8%99-google-chrome/">วิธีการดูที่มา HTML ใน Google Chrome</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/blockquote-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/"> <amp-img src="https://exse.eyewated.com/pict/22ac97c040112fe9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/blockquote-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">Blockquote คืออะไร?</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-html/"> <amp-img src="https://exse.eyewated.com/pict/72aa1f41a5ad30be-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A3%E0%B8%AB%E0%B8%B1%E0%B8%AA%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2-html/">รหัสภาษา HTML</a></h3> <div class="amp-related-meta"> ออกแบบเว็บไซต์และ Dev </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%AA%E0%B8%B4%E0%B8%97%E0%B8%98%E0%B8%B4%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%AA%E0%B8%B9%E0%B8%87%E0%B8%AA%E0%B8%B8%E0%B8%94%E0%B8%88%E0%B8%B2/"> <amp-img src="https://exse.eyewated.com/pict/41dfd89aef8a35c8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%AA%E0%B8%B4%E0%B8%97%E0%B8%98%E0%B8%B4%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%AA%E0%B8%B9%E0%B8%87%E0%B8%AA%E0%B8%B8%E0%B8%94%E0%B8%88%E0%B8%B2/">ได้ประสิทธิภาพสูงสุดจากระบบสเตอริโอ</a></h3> <div class="amp-related-meta"> คู่มือการซื้อ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2%E0%B8%AA%E0%B8%B5%E0%B8%A1%E0%B8%B5%E0%B8%9C%E0%B8%A5%E0%B8%95%E0%B9%88%E0%B8%AD%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD/"> <amp-img src="https://exse.eyewated.com/pict/13bed14bff66308e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2%E0%B8%AA%E0%B8%B5%E0%B8%A1%E0%B8%B5%E0%B8%9C%E0%B8%A5%E0%B8%95%E0%B9%88%E0%B8%AD%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD/">จิตวิทยาสีมีผลต่อการออกแบบบล็อกอย่างไร</a></h3> <div class="amp-related-meta"> เว็บ & ค้นหา </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/vivitek-dh758ust-%E0%B8%89%E0%B8%B2%E0%B8%A2%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%80%E0%B8%88%E0%B8%84%E0%B9%80%E0%B8%95%E0%B8%AD%E0%B8%A3%E0%B9%8C-dlp/"> <amp-img src="https://exse.eyewated.com/pict/f76c5045d67b3c80-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/vivitek-dh758ust-%E0%B8%89%E0%B8%B2%E0%B8%A2%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%80%E0%B8%88%E0%B8%84%E0%B9%80%E0%B8%95%E0%B8%AD%E0%B8%A3%E0%B9%8C-dlp/">Vivitek DH758UST ฉายโปรเจคเตอร์ DLP แบบสั้น</a></h3> <div class="amp-related-meta"> รีวิวผลิตภัณฑ์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B9%88%E0%B8%A7%E0%B8%99%E0%B8%95/"> <amp-img src="https://exse.eyewated.com/pict/c4a7e80696cc2ede-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B9%88%E0%B8%87%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B9%88%E0%B8%A7%E0%B8%99%E0%B8%95/">วิธีการส่งข้อความส่วนตัวใน Pinterest</a></h3> <div class="amp-related-meta"> สื่อสังคม </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/9-14/"> <amp-img src="https://exse.eyewated.com/pict/b01c87dcbddd3278-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/9-14/">9 หูฟังการออกกำลังกายที่ดีที่สุดที่จะซื้อในปี ค.ศ. 2018</a></h3> <div class="amp-related-meta"> รีวิวผลิตภัณฑ์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%81%E0%B8%AD%E0%B9%87%E0%B8%9B%E0%B9%80%E0%B8%9B%E0%B8%B4%E0%B9%89%E0%B8%A5%E0%B9%81%E0%B8%9A%E0%B9%87%E0%B8%84%E0%B8%81%E0%B8%A3%E0%B8%B2%E0%B8%A7%E0%B8%94%E0%B9%8C%E0%B9%81%E0%B8%9A%E0%B9%87/"> <amp-img src="https://exse.eyewated.com/pict/ed2e340dd3fc37bb-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%81%E0%B8%AD%E0%B9%87%E0%B8%9B%E0%B9%80%E0%B8%9B%E0%B8%B4%E0%B9%89%E0%B8%A5%E0%B9%81%E0%B8%9A%E0%B9%87%E0%B8%84%E0%B8%81%E0%B8%A3%E0%B8%B2%E0%B8%A7%E0%B8%94%E0%B9%8C%E0%B9%81%E0%B8%9A%E0%B9%87/">แอ็ปเปิ้ลแบ็คกราวด์แบ็คทำงานเป็นจอแสดงผลหัวใจการแพทย์</a></h3> <div class="amp-related-meta"> คู่มือการซื้อ </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9B%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%82%E0%B8%99%E0%B8%B2%E0%B8%94%E0%B8%8A%E0%B8%B8%E0%B8%94%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0/"> <amp-img src="https://exse.eyewated.com/pict/b9352a32e4f23103-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9B%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%82%E0%B8%99%E0%B8%B2%E0%B8%94%E0%B8%8A%E0%B8%B8%E0%B8%94%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0/">วิธีการปรับขนาดชุดรูปภาพด้วย XnView</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%88%E0%B8%B0%E0%B8%97%E0%B8%B4%E0%B9%89%E0%B8%87-windows-xp/"> <amp-img src="https://exse.eyewated.com/pict/1af829ac8bad355a-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%AB%E0%B8%95%E0%B8%B8%E0%B8%9C%E0%B8%A5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%88%E0%B8%B0%E0%B8%97%E0%B8%B4%E0%B9%89%E0%B8%87-windows-xp/">เหตุผลที่จะทิ้ง Windows XP สำหรับ Windows 7</a></h3> <div class="amp-related-meta"> ของ windows </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89-dock-%E0%B9%83%E0%B8%99-ios-11/"> <amp-img src="https://exse.eyewated.com/pict/5217c1da6c11318f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89-dock-%E0%B9%83%E0%B8%99-ios-11/">วิธีการใช้ Dock ใน iOS 11</a></h3> <div class="amp-related-meta"> IPad </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/hdmi-dvi-%E0%B9%81%E0%B8%A5%E0%B8%B0-hdcp/"> <amp-img src="https://exse.eyewated.com/pict/b942044f5324342c-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/hdmi-dvi-%E0%B9%81%E0%B8%A5%E0%B8%B0-hdcp/">HDMI, DVI และ HDCP</a></h3> <div class="amp-related-meta"> โฮมเธียเตอร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%9E%E0%B8%B7%E0%B9%89%E0%B8%99%E0%B8%9C%E0%B8%B4%E0%B8%A7-microsoft/"> <amp-img src="https://exse.eyewated.com/pict/64309e341f2c3153-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%9E%E0%B8%B7%E0%B9%89%E0%B8%99%E0%B8%9C%E0%B8%B4%E0%B8%A7-microsoft/">พื้นผิว Microsoft เหมาะสมกับคุณหรือไม่?</a></h3> <div class="amp-related-meta"> คู่มือการซื้อ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%81%E0%B8%A1-age-of-empires-ii-demo-%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94/"> <amp-img src="https://exse.eyewated.com/pict/005ca6a68fbe33bd-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%81%E0%B8%A1-age-of-empires-ii-demo-%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C%E0%B9%82%E0%B8%AB%E0%B8%A5%E0%B8%94/">เกม Age of Empires II Demo ดาวน์โหลด</a></h3> <div class="amp-related-meta"> การเล่นเกม </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%9F%E0%B8%A3%E0%B8%B5-serif-western/"> <amp-img src="https://exse.eyewated.com/pict/8523d9b7d66350eb-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%9F%E0%B8%A3%E0%B8%B5-serif-western/">วิธีการรับฟรี Serif Western แบบอักษรสำหรับโปสเตอร์ WANTED</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B8%9A-pokecoins/"> <amp-img src="https://exse.eyewated.com/pict/1097da93447e3786-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A3%E0%B8%B1%E0%B8%9A-pokecoins/">วิธีการรับ Pokecoins เพิ่มเติมใน Pokemon Go</a></h3> <div class="amp-related-meta"> การเล่นเกม </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/finger-%E0%B8%84%E0%B8%B3%E0%B8%AA%E0%B8%B1%E0%B9%88%E0%B8%87-linux-unix/">Finger - คำสั่ง Linux / Unix</a></h3> <div class="amp-related-meta"> ลินุกซ์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%84%E0%B8%B3%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3%E0%B9%82%E0%B8%94%E0%B8%A2%E0%B8%A2%E0%B9%88%E0%B8%AD%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AD%E0%B8%B4%E0%B8%99/"> <amp-img src="https://exse.eyewated.com/pict/fc5090f557553fbf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%84%E0%B8%B3%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3%E0%B9%82%E0%B8%94%E0%B8%A2%E0%B8%A2%E0%B9%88%E0%B8%AD%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AD%E0%B8%B4%E0%B8%99/">คำแนะนำโดยย่อสำหรับอินเทอร์เน็ตและซอฟต์แวร์รักษาความปลอดภัยบนอินเทอร์เน็ตที่ดีที่สุด</a></h3> <div class="amp-related-meta"> อินเทอร์เน็ตและเครือข่าย </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%9A%E0%B8%A3%E0%B8%B4%E0%B8%A9%E0%B8%B1%E0%B8%97-%E0%B8%A7%E0%B8%B5%E0%B8%A3%E0%B8%9A%E0%B8%B8%E0%B8%A3%E0%B8%B8%E0%B8%A9%E0%B8%8B%E0%B8%B5%E0%B8%A3%E0%B8%B5%E0%B9%88%E0%B8%AA%E0%B9%8C/"> <amp-img src="https://exse.eyewated.com/pict/6a65ccfef95c3548-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%9A%E0%B8%A3%E0%B8%B4%E0%B8%A9%E0%B8%B1%E0%B8%97-%E0%B8%A7%E0%B8%B5%E0%B8%A3%E0%B8%9A%E0%B8%B8%E0%B8%A3%E0%B8%B8%E0%B8%A9%E0%B8%8B%E0%B8%B5%E0%B8%A3%E0%B8%B5%E0%B9%88%E0%B8%AA%E0%B9%8C/">บริษัท วีรบุรุษซีรี่ส์</a></h3> <div class="amp-related-meta"> การเล่นเกม </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%99%E0%B8%AA%E0%B8%B5%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B9%81%E0%B8%9A/"> <amp-img src="https://exse.eyewated.com/pict/da593603296236fd-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%9B%E0%B8%A5%E0%B8%B5%E0%B9%88%E0%B8%A2%E0%B8%99%E0%B8%AA%E0%B8%B5%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B9%81%E0%B8%9A/">เปลี่ยนสีและเพิ่มรูปแบบใน Photoshop</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/excel-sumif/"> <amp-img src="https://exse.eyewated.com/pict/0d95223990c33724-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/excel-sumif/">Excel SUMIF: มูลค่ารวมที่ตรงกับเกณฑ์ที่ระบุ</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/smart-lock-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/"> <amp-img src="https://exse.eyewated.com/pict/18b9778e8e083903-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/smart-lock-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">Smart Lock คืออะไร?</a></h3> <div class="amp-related-meta"> ใหม่และต่อไป </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B8%99%E0%B8%B3%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AD%E0%B8%B1%E0%B8%81%E0%B8%A9%E0%B8%A3%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%B4/"> <amp-img src="https://exse.eyewated.com/pict/24df4174ae342f81-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B8%99%E0%B8%B3%E0%B9%80%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B8%AD%E0%B8%B1%E0%B8%81%E0%B8%A9%E0%B8%A3%E0%B9%80%E0%B8%9E%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%B4/">นำเข้าแบบอักษรเพิ่มเติมไปยัง Microsoft Office Programs</a></h3> <div class="amp-related-meta"> ซอฟต์แวร์ </div> </div> </div> <div class="amp-related-content"> <a href="https://th.eyewated.com/%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99%E0%B9%80%E0%B8%9E%E0%B8%A5%E0%B8%87%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B8%94%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2/"> <amp-img src="https://exse.eyewated.com/pict/35afb51e5ea532d7-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://th.eyewated.com/%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99%E0%B9%80%E0%B8%9E%E0%B8%A5%E0%B8%87%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B8%94%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B8%B8%E0%B8%93%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2/">เล่นเพลงโปรดของคุณด้วย Windows Media Player 10</a></h3> <div class="amp-related-meta"> โฮมเธียเตอร์ </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 th.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.15 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-04 00:23:53 --> <!-- 0.003 -->