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