การเพิ่มวิดีโอลงใน Adobe Muse
ด้านที่น่าสนใจจริงๆของ Adobe Muse คือช่วยให้คุณสามารถสร้างเว็บเพจโดยใช้กระบวนการทำงานที่คล้ายคลึงกับที่ใช้ในการวางสิ่งตีพิมพ์ คุณไม่จำเป็นต้องมีความรู้ความเข้าใจเกี่ยวกับโค้ดที่สร้างเว็บไซต์หรือหน้าเว็บ แต่ความคุ้นเคยกับ HTML5, CSS และ JavaScript จะไม่เกิดขึ้น
แม้ว่าวิดีโอแบบดั้งเดิมจะถูกเพิ่มโดยใช้ HTML5 Video API แต่ Adobe Muse ก็ทำสิ่งเดียวกันกับสิ่งที่เรียกว่า "วิดเจ็ต" วิดเจ็ตสร้าง HTML 5 สำหรับงานเฉพาะ แต่ใช้อินเทอร์เฟซภาษาธรรมดาใน Muse เพื่อเขียนโค้ดเมื่อเผยแพร่หน้าเว็บ
ในแบบฝึกหัดนี้เราจะใช้วิดเจ็ตซึ่งคุณสามารถดาวน์โหลดได้ฟรีจาก Muse Resources เมื่อดาวน์โหลดวิดเจ็ตสิ่งที่คุณต้องทำคือเปิดไฟล์. zip และดับเบิลคลิกที่ไฟล์. mulib ในโฟลเดอร์วิดีโอแบบเต็มหน้าจอ ขั้นตอนนี้จะติดตั้งลงใน Adobe Muse ของคุณ
วิธีการจัดเตรียมเพจสำหรับวิดีโอพื้นหลังใน Adobe Muse CC
เมื่อติดตั้งวิดเจ็ตแล้วคุณสามารถสร้างหน้าเว็บที่จะใช้วิดีโอได้
ก่อนที่คุณจะเริ่มต้นสร้างโฟลเดอร์สำหรับเว็บไซต์ Muse ของคุณ ภายในโฟลเดอร์นั้นสร้างโฟลเดอร์อื่น - ฉันใช้ " สื่อ "- และย้ายวิดีโอ mp4 และ webm ของคุณลงในโฟลเดอร์นั้น
เมื่อคุณเปิด Muse เลือก ไฟล์> เว็บไซต์ใหม่. เมื่อกล่องโต้ตอบ Layout เปิดขึ้นให้เลือก เดสก์ทอป เป็น เค้าโครงเริ่มต้น และเปลี่ยน ความกว้างหน้าเว็บ และ ความสูงของหน้าเว็บ ค่าถึง 1200 และ 900. คลิก ตกลง.
ดับเบิลคลิกที่หน้าหลักในมุมมองแผนเพื่อเปิดหน้าหลัก เมื่อเพจต้นแบบเปิดขึ้นให้ย้ายส่วนหัวกระดาษและท้ายกระดาษไปที่ด้านบนและด้านล่างของหน้า คุณไม่จำเป็นต้องมีส่วนหัวและส่วนท้ายสำหรับตัวอย่างนี้
03 จาก 05วิธีใช้ภาพพื้นหลังเต็มหน้าจอใน Adobe Muse CC
การใช้วิดเจ็ตทำได้ง่าย สิ่งแรกที่คุณต้องทำก็คือการกลับไปที่มุมมองแผนงานโดยการเลือก ดู> โหมดแผน. เมื่อมุมมองแบบแผนเปิดขึ้นให้คลิกสองครั้งที่ หน้าแรก เพื่อเปิด
เปิดแผงไลบรารี - หากยังไม่เปิดทางด้านขวาของอินเทอร์เฟซเลือก หน้าต่าง> ห้องสมุด - และหมุนวงแหวน MR วิดีโอพื้นหลังเต็มจอ โฟลเดอร์ ลากวิดเจ็ตไปยังโฟลเดอร์ไปที่เพจ
คุณจะสังเกตเห็น ตัวเลือก ขอให้คุณป้อนชื่อของวิดีโอ mp4 และ webm ใส่ชื่อตรงตามที่สะกดไว้ในโฟลเดอร์ที่คุณวางไว้ เคล็ดลับเล็กน้อยเพื่อให้แน่ใจว่าคุณไม่ได้ทำผิดคือการคัดลอกชื่อของวิดีโอ mp4 และวางลงใน MP4 และ WEBM พื้นที่ของ เมนูตัวเลือก.
หนึ่งเคล็ดลับอื่น ๆ : เครื่องมือทั้งหมดนี้ไม่สามารถเขียนรหัส HTML 5 สำหรับคุณได้ คุณสามารถบอกได้เพราะคุณเห็น <> ในวิดเจ็ต ในกรณีนี้คุณสามารถวางวิดเจ็ตออกจากหน้าเว็บลงในกระดาษแข็งและยังสามารถใช้งานได้ วิธีนี้จะไม่รบกวนเนื้อหาใด ๆ ที่คุณจะวางไว้บนหน้า
04 จาก 05วิธีเพิ่มวิดีโอและทดสอบหน้าเว็บใน Adobe Muse CC
แม้ว่าคุณจะได้เพิ่มโค้ดที่จะเล่นวิดีโอ Muse ยังคงไม่มีร่องรอยว่ามีวิดีโอเหล่านี้อยู่หรือไม่ ในการแก้ไขปัญหานี้ให้เลือก ไฟล์> เพิ่มไฟล์สำหรับการอัปโหลด. เมื่อ อัปโหลดกล่องโต้ตอบ เปิดไปที่โฟลเดอร์ที่มีวิดีโอของคุณเลือกและคลิก เปิด. เพื่อให้มั่นใจว่าได้อัปโหลดแล้วให้เปิด แผงสินทรัพย์ และคุณจะเห็นวิดีโอทั้งสองของคุณ เพียงแค่ทิ้งไว้ในแผงควบคุม ไม่จำเป็นต้องวางบนหน้าเว็บ
เมื่อต้องการทดสอบโครงการให้เลือก ไฟล์> หน้าตัวอย่างในเบราเซอร์ หรือเนื่องจากเป็นหน้าเดียว ไฟล์> ดูตัวอย่างไซต์ในเบราเซอร์. เบราเซอร์เริ่มต้นของคุณจะเปิดขึ้นและวิดีโอ - ในกรณีของฉันจะเป็นพายุฝนเขตร้อน - จะเริ่มเล่น
ณ จุดนี้คุณสามารถรักษาไฟล์ Muse เป็นหน้าเว็บปกติและเพิ่มเนื้อหาลงในโฮมเพจและวิดีโอจะเล่นภายใต้มัน
05 จาก 05วิธีเพิ่มกรอบโปสเตอร์วิดีโอใน Adobe Muse CC
นี่คือเว็บที่เรากำลังพูดถึงอยู่ที่นี่และขึ้นอยู่กับความเร็วในการเชื่อมต่อมีโอกาสที่ผู้ใช้ของคุณอาจเปิดหน้าเว็บและจ้องมองที่หน้าจอว่างระหว่างที่วิดีโอโหลด นี่ไม่ใช่สิ่งที่ดี นี่คือวิธีการจัดการกับความไม่ชอบมาพากลนี้
นี่คือ "แนวทางปฏิบัติที่ดีที่สุด" เพื่อรวมกรอบโปสเตอร์ของวิดีโอซึ่งจะปรากฏขึ้นในขณะที่โหลดวิดีโอ นี่เป็นภาพหน้าจอขนาดเต็มของเฟรมจากวิดีโอ
หากต้องการเพิ่มเฟรมโปสเตอร์ให้คลิกหนึ่งครั้ง เบราเซอร์เติม ที่ด้านบนของหน้า คลิก ลิงก์รูปภาพ และไปที่ภาพที่จะใช้ ใน ฟิตติ้ง พื้นที่เลือก Scale to Fill และคลิกที่ จุดศูนย์กลาง ใน ตำแหน่ง พื้นที่ วิธีนี้จะทำให้ภาพมีมิติตั้งแต่จุดกึ่งกลางของภาพเมื่อขนาดวิวพอร์ตของเบราเซอร์เปลี่ยนไป นอกจากนี้คุณยังจะเห็นภาพเติมเต็มหน้า
เคล็ดลับเล็ก ๆ น้อย ๆ ก็คืออย่างน้อยต้องมีสีทึบไม่ใช่สีขาวเติมในกรณีที่โปสเตอร์โปสเตอร์ใช้เวลาสักครู่เพื่อให้ปรากฏ เมื่อต้องการทำเช่นนี้ให้คลิกชิปสีเพื่อเปิดตัวเลือกสี Muse เลือกเครื่องมือ eyedropper และคลิกที่สีเด่นในภาพ เมื่อเสร็จสิ้นคลิกที่หน้าเพื่อปิดช่องโต้ตอบการเติมข้อมูลของเบราเซอร์
ณ จุดนี้คุณสามารถบันทึกโครงการหรือเผยแพร่ได้
ส่วนสุดท้ายของชุดนี้จะแสดงวิธีเขียนโค้ด HTML5 ที่นำเสนอวิดีโอไปยังพื้นหลังของหน้าเว็บ
