Lynda.com ออกแบบวิดีโอพื้นหลัง HTML ของเว็บ

• อาจ 10, 2024

วิดีโอพื้นหลังเป็นวิธีที่ยอดเยี่ยมในการทำการตลาดผลิตภัณฑ์ของคุณและในหลักสูตรฝึกอบรมวิดีโอ Lynda.com นี้ ออกแบบเว็บ: วิดีโอพื้นหลัง HTML ด้วย Chris Converse คุณจะได้เรียนรู้วิธีเพิ่มวิดีโอพื้นหลังเล่นอัตโนมัติในหน้าเว็บของคุณ คุณจะได้เรียนรู้วิธีใช้ CSS เพื่อวางองค์ประกอบการออกแบบอื่น ๆ บนวิดีโอพื้นหลัง และไฟล์แบบฝึกหัดนั้นฟรีสำหรับสมาชิกแบบมาตรฐาน

Converse เริ่มต้นด้วยไฟล์กระดูกเปลือย HTML และสร้างคอนเทนเนอร์ div หลักสำหรับองค์ประกอบการออกแบบ: สโลแกนข้อความโลโก้ svg และวิดีโอ เขาสาธิตวิธีใช้การเล่นอัตโนมัติในแท็กวิดีโอและวิธีการตั้งค่าวิดีโอที่พบมากที่สุดสองประเภทคือ. mp4 และ .ogg

ถัดไป Converse จะย้ายไปที่ไฟล์ CSS และ CSS เพื่อจัดรูปแบบและจัดตำแหน่งวิดีโอและภาพโลโก้ที่กึ่งกลาง เขาย้ายไปทำเช่นเดียวกันสำหรับข้อความสโลแกน ฉันชอบเทคนิคของเขาในการทำงานกับชายแดนเป็นพิเศษ

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

Converse สาธิตวิธีการใช้ JavaScript เพื่อเพิ่มการควบคุมที่ซับซ้อนยิ่งขึ้นบนหน้าจอสำหรับปัญหาที่ซับซ้อนยิ่งขึ้นสำหรับคุณลักษณะของอุปกรณ์มือถือเช่นเหตุการณ์การสัมผัส เขาแนะนำเว็บไซต์บุคคลที่สามชื่อว่า Modernizr ซึ่งจะสร้างคลาส CSS ที่สามารถเพิ่มไปยังหน้าเว็บผ่านทาง JavaScript ตามคุณสมบัติของอุปกรณ์ปัจจุบัน เขาสาธิตวิธีสร้างรหัสดาวน์โหลดและเพิ่มลงในโค้ดหน้าเว็บของคุณ

ในบทเรียนสุดท้าย Converse สาธิตวิธีเขียนโค้ดตำแหน่งและสไตล์อื่น ๆ สำหรับเค้าโครงเพื่อให้วิดีโอครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมด

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

Chris Converse จบการศึกษาด้านการออกแบบกราฟิกจากสถาบันเทคโนโลยี Rochester และประสบการณ์ด้านการออกแบบและเทคโนโลยี 22 ปี

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

การเปิดเผย: ฉันไม่ได้รับการชดเชยทางการเงินสำหรับบทความนี้ ความคิดเห็นเป็นของตัวเองอย่างสมบูรณ์ตามประสบการณ์ของฉัน