HTML วีดีโอ (วิดีโอ) เล่น
มีหลายวิธีในการเล่นวิดีโอในวิธีการที่มี HTML
HTML วีดีโอ (วิดีโอ) เล่น
ตัวอย่าง
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
ลอง»
ปัญหาและแนวทางแก้ไข
เล่นวิดีโอในรูปแบบ HTML ไม่ง่าย!
คุณต้องการมากของเคล็ดลับที่คุ้นเคยเพื่อให้มั่นใจว่าไฟล์วิดีโอของคุณในเบราว์เซอร์ (Internet Explorer, Chrome, Firefox, Safari, Opera) และฮาร์ดแวร์ (PC, Mac, iPad, iPhone) สามารถเล่นได้
ในบทนี้คุณ W3CSchool สรุปปัญหาและแนวทางแก้ไข
โดยใช้ <embed> แท็ก
<embed> tag บทบาทคือการฝังองค์ประกอบมัลติมีเดียในหน้าเว็บ HTML
รหัส HTML ต่อไปที่จะแสดงวิดีโอ Flash ฝังอยู่ในหน้านี้:
ปัญหา
- HTML4 ไม่รู้จัก <embed> แท็ก หน้าของคุณจะไม่สามารถตรวจสอบได้
- หากเบราว์เซอร์ของคุณไม่สนับสนุน Flash ดังนั้นวิดีโอจะไม่เล่น
- iPad และ iPhone ไม่สามารถแสดงวิดีโอแฟลช
- ถ้าคุณแปลงวิดีโอไปยังรูปแบบอื่น ๆ ก็ยังคงไม่ได้เล่นในเบราว์เซอร์
โดยใช้ <object> แท็ก
บทบาท <object> แท็กคือการฝังองค์ประกอบมัลติมีเดียในหน้าเว็บ HTML
ข้อมูลโค้ด HTML ต่อไปนี้แสดงให้เห็นถึงวิดีโอ Flash ฝังอยู่ในหน้านี้:
ปัญหา:
- หากเบราว์เซอร์ของคุณไม่สนับสนุนแฟลชวิดีโอจะไม่เล่น
- iPad และ iPhone ไม่สามารถแสดงวิดีโอแฟลช
- ถ้าคุณแปลงวิดีโอไปยังรูปแบบอื่น ๆ ก็ยังคงไม่ได้เล่นในเบราว์เซอร์
โดยใช้ HTML5 วิดีโอ <> องค์ประกอบ
HTML5 วิดีโอ <> tag กำหนดวิดีโอหรือภาพยนตร์
<video> องค์ประกอบในเบราว์เซอร์ที่ทันสมัยได้รับการสนับสนุน
ส่วน HTML ต่อไปนี้จะแสดง OGG, MP4, หรือวิดีโอ WebM รูปแบบหน้าเว็บที่ฝัง:
ตัวอย่าง
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
ลอง»
ปัญหา:
- คุณจำเป็นต้องแปลงวิดีโอในรูปแบบที่แตกต่างกันมาก
- <video> องค์ประกอบที่ไม่ถูกต้องในเบราว์เซอร์รุ่นเก่า
โซลูชั่นที่ดีที่สุด HTML
ตัวอย่างต่อไปนี้ใช้สี่รูปแบบวิดีโอที่แตกต่างกัน HTML 5 <video> องค์ประกอบพยายามที่จะเล่น MP4, OGG, WebM หรือรูปแบบคือการเล่นวิดีโอ หากทุกอย่างล้มเหลวแล้วถอยกลับไป <embed> องค์ประกอบ
HTML 5 + <object> + <embed>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
ลอง»
ปัญหา:
- คุณต้องแปลงหลายรูปแบบวิดีโอที่แตกต่าง
โซลูชั่น Youku
วิธีที่ง่ายที่สุดที่จะแสดงวิดีโอในรูปแบบ HTML คือการใช้ Youku และเว็บไซต์วิดีโออื่น ๆ
หากคุณต้องการที่จะเล่นวิดีโอในหน้าเว็บคุณสามารถอัปโหลดวิดีโอ Youku และเว็บไซต์วิดีโออื่น ๆ และจากนั้นใส่รหัส HTML ในการเล่นวิดีโอในหน้าเว็บของคุณ:
ใช้เชื่อมโยงหลายมิติ
หากหน้าเว็บมีเชื่อมโยงหลายมิติที่ชี้ไปยังไฟล์มีเดียเบราว์เซอร์ส่วนใหญ่จะใช้โปรแกรม "ผู้ช่วย" ในการเล่นไฟล์
ส่วนรหัสต่อไปนี้แสดงการเชื่อมโยงไปยังไฟล์ AVI หากผู้ใช้คลิกที่ลิงค์เบราว์เซอร์จะเริ่มต้น "การประยุกต์ใช้ตัวช่วย" เช่น Windows Media Player เพื่อเล่นไฟล์ AVI:
ในรายละเอียดวิดีโอแบบอินไลน์
เมื่อวิดีโอถูกรวมอยู่ในหน้าเว็บก็จะเรียกว่าวิดีโอแบบอินไลน์
หากคุณวางแผนที่จะใช้วิดีโออินไลน์ในโปรแกรมประยุกต์บนเว็บที่คุณจำเป็นต้องรู้ว่าหลายคนพบวิดีโอแบบอินไลน์ที่น่ารำคาญ
นอกจากนี้ทราบว่าผู้ใช้อาจต้องปิดตัวเลือกวิดีโอแบบอินไลน์เบราว์เซอร์
แนะนำที่ดีที่สุดของเราคือการเฉพาะเมื่อผู้ใช้ต้องการที่จะเห็นวิดีโอสถานที่แบบอินไลน์มีพวกเขา ตัวอย่างในเชิงบวกคือว่าเมื่อผู้ใช้ต้องการดูวิดีโอและคลิกที่ลิงค์จะเปิดหน้าเว็บและเล่นวิดีโอ
แท็ก HTML มัลติมีเดีย
ใหม่: HTML5 แท็กใหม่
| 标签 | 描述 |
|---|---|
| <embed> | 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 |
| <object> | 定义内嵌对象。 |
| <param> | 定义对象的参数。 |
| <audio> New | 定义了声音内容 |
| <video> New | 定义一个视频或者影片 |
| <source> New | 定义了media元素的多媒体资源(<video> 和 <audio>) |
| <track> New | 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |