วิธีการทำสไลด์โชว์เป็น HTML5

HTML5 ถัดไปสร้างเว็บมาตรฐาน เป็นที่หัวมุม คุณจะเพิ่มการสนับสนุน HTML5 เว็บไซต์ของคุณได้อย่างไร บางทีก็เวลาน้อยในการเตรียม บทความนี้จะแสดงวิธีการทำสไลด์โชว์ HTML5 และฝังเว็บไซต์ของคุณ

สไลด์โชว์ HTML5 ทำงานเอง

รุ่นที่ใหญ่ที่สุดของ HTML5 อย่างใดอย่างหนึ่งคือคุณสามารถโดยตรงฝัง และเล่นวิดีโอออนไลน์โดย ด้วยวิธีนี้ ผู้เข้าชมสามารถดูสไลด์โชว์ HTML5 ตามเบราว์เซอร์สนับสนุน HTML5 ผู้เล่นแฟลชไม่จำเป็น เนื่องจาก HTML5 มีมาเป็นรุ่นสุดท้าย ตัวแปลงสัญญาณวิดีโอสามารถคงใช้ WebM, H264, Ogv หรือทั้งสองอย่าง

นี่คือวิธีที่คุณสามารถฝังวิดีโอสไลด์โชว์เป็น HTML5:

< poster="movie.jpg วิดีโอ" ควบคุม >
< แหล่ง src='movie.webm' ชนิด=' วิดีโอ/webm ตัวแปลงสัญญาณ "vp8.0, vorbis" = " / >
< แหล่ง src='movie.ogv' ชนิด=' วิดีโอ/ogg ตัวแปลงสัญญาณ "theora, vorbis" = " / >
< แหล่ง src='movie.mp4' ชนิด=' วิดีโอ/mp4 ตัวแปลงสัญญาณ = " avc1.4D401E, mp4a.40.2"'/ >
< วีดีโอ >

ถ้าคุณสามารถดูวิดีโอด้านล่าง เว็บเบราว์เซอร์ของคุณสนับสนุน HTML5 เกินไป ปัจจุบัน เบราว์เซอร์สนับสนุน HTML5 สไลด์โชว์แล้ว ดูรายละเอียดเพิ่มเติมเกี่ยวกับ HTML5 เบราว์เซอร์

HTML5 สไลด์โชว์วิดีโอสร้างด้วยDVD Slideshow Builder Deluxe - ช่วงการเปลี่ยนภาพมากกว่า 100 รวม

ตอนนี้สิ่งที่คุณจำเป็นต้องเฉพาะ HTML5 สไลด์โชว์ซอฟต์แวร์ และสร้างสไลด์โชว์วิดีโอในรูปแบบMP4 (AVC)

สไลด์โชว์ HTML5 แบบโต้ตอบ

เช่นปัจจุบันใช้แฟลชสไลด์โชว์บนเว็บไซต์ คุณยังสามารถออกแบบนำเสนอภาพนิ่ง HTML5 โดยไม่ต้องติดตั้งอะไร แน่นอน คุณไม่ต้องเขียนตัวแปลงสัญญาณด้วยตนเอง ที่นี่เราใช้เวลาร่วมกัน HTML5 สไลด์โชว์ออนไลน์ตัวอย่างแสดงวิธีการฝังเป็นสไลด์โชว์ HTML5

1. วางแฟ้มในตำแหน่งที่เหมาะสม

เมื่อคุณดาวน์โหลดแฟ้มโครงการ HTML5 ที่ unzip แฟ้มคอมพิวเตอร์ และย้าย หรืออัปโหลดไปยังโฟลเดอร์ของเว็บไซต์ของคุณ

นอกจากนี้ยังมีบุคคลอื่นร่วมโครงการของพวกเขา HTML5 สไลด์โชว์ออนไลน์ Google หนึ่งและเปลี่ยนแปลงให้เหมาะสมกับความต้องการของคุณ กว่าให้ลิขสิทธิ์ การขอบคุณการทำงานของคนอื่น ทำตามคำสั่งที่อนุญาต

2. เปลี่ยนรหัสให้เหมาะสมกับความต้องการของคุณ

โดยปกติ คุณไม่จำเป็นต้องเปลี่ยนรหัสของ css และ js แฟ้ม ยกเว้นที่อยู่การเชื่อมโยงถ้าคุณได้ใส่ไว้ในโฟลเดอร์อื่น ตัวอย่าง คุณควรเปลี่ยนที่อยู่การเชื่อมโยงแฟ้ม css การ 'scripts/script.js' ถ้าคุณได้ย้ายแฟ้ม script.js ลงในโฟลเดอร์ที่มีอยู่ที่เรียกว่า 'สคริปต์' ที่อยู่การเชื่อมโยงชนิดนี้คือการเชื่อมโยงสัมพัทธ์ ในขณะที่ชนิดอื่นเป็นการเชื่อมโยงแบบสัมบูรณ์ เช่น http://yoursite.com/scripts/script.js ถ้าเป็นฝังสไลด์โชว์ HTML5 เพจในโฟลเดอร์คุณควรใช้เหมือน ' ... /scripts/script.js' เมื่อต้องการเชื่อมโยงแบบสัมบูรณ์ดีกว่าหากคุณไม่คุ้นเคยกับความแตกต่าง

ส่วนสำคัญที่สุดของสไลด์โชว์ HTML5 นี้ถูกทำเครื่องหมายในกล่องสีแดง คัดลอกรหัสนี้ไปยังหน้าใด ๆ ต้องสไลด์โชว์ HTML5 เพื่อแสดง และเปลี่ยนที่อยู่ของรูปภาพเช่นข้าง

คลิกเพื่อดูภาพขยาย

3. แสดงการเบราว์เซอร์ HTML5 ตัวอย่าง

สุดท้าย ดูวิธีดูสไลด์โชว์ HTML5 เหมือนในเบราว์เซอร์ HTML5 โดยปกติ คุณจะได้รับนี้สไลด์โชว์ HTML5 หน้า คุณยังสามารถดาวน์โหลดไฟล์นำเสนอภาพนิ่งของ HTML5 และดูรายละเอียดกระบวนการในการออกแบบ โดยมาร์ติน Angelov

นอกจากนี้ยัง ตรวจสอบแฟลชสไลด์โชว์ต้นแบบเพื่อให้ภาพนิ่งการป้อนเว็บไซต์ในคลิ