คู่มือ Webflow + Swarmify ฉบับสมบูรณ์สำหรับการโฮสต์วิดีโอ

คุณใช้ Webflow หรือไม่ ถ้าใช่ Swarmify เสนอสิ่งที่คุณต้องการเพื่อมอบประสบการณ์การรับชมวิดีโอที่รวดเร็วและคุณภาพสูง

เนื้อหาที่ดีคืออะไร? แลนดิ้งเพจคืออะไร? เว็บไซต์คืออะไร?

ไปเป็นวันที่เมื่อการสร้างเว็บไซต์ถูกสงวนไว้สำหรับนักพัฒนาเว็บ มังกร ไฟ

ทุกวันนี้ คุณสามารถสร้างเว็บไซต์ที่น่าทึ่งได้ในเวลาที่ผู้ชายคนต่อไปทำแซนด์วิชให้เสร็จ

ขอบคุณผู้สร้างเว็บไซต์ เช่น Webflow คุณไม่จำเป็นต้องรู้อะไรเกี่ยวกับการเขียนโค้ดเพื่อสร้างเว็บไซต์ที่โดดเด่นในระยะเวลาอันสั้น

สำหรับโพสต์ของวันนี้ ฉันได้สร้างเว็บไซต์ตัวอย่าง ( คุณจะเห็นมันในนาที ) ในเวลาน้อยกว่า 30 นาที! และฉันไม่ใช่สิ่งที่คุณเรียกว่านักพัฒนาเว็บมืออาชีพ ไม่แม้แต่ในความฝัน :)

เครื่องมือต่างๆ เช่น Webflow ได้ขจัดอุปสรรคมากมายที่ทำให้ผู้ที่ไม่เข้าใจเทคโนโลยีเช่นคุณและฉันออกจากการสร้างเว็บไซต์

ตอนนี้...

หากคุณใช้วิดีโอบนเว็บไซต์ Webflow ของคุณ คุณต้องการให้วิดีโอโหลดได้รวดเร็วและไม่หยุดชะงัก

คุณต้องการมอบประสบการณ์การรับชมที่ดีที่สุดแก่ผู้ใช้ของคุณเท่านั้น และไม่มีอะไรมากไปกว่านั้น

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

คุณไม่ต้องการสิ่งนั้นเพราะคุณฉลาด นอกจากนี้ เนื่องจากตอนนี้คุณมีเทคโนโลยี SmartVideo ของ Swarmify แล้ว

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

คุณสามารถส่งวิดีโอที่เร็วกว่าผู้เล่นทั่วไปในอุตสาหกรรมถึง 12 เท่า ยังดีกว่าโซลูชันการจัดส่ง SmartVideo ที่เป็นกรรมสิทธิ์เฉพาะช่วยลดปัญหาการหยุดชะงักได้ถึง 8 เท่า

และในโพสต์ของวันนี้ เราแสดงให้คุณเห็นถึงวิธีการผสานรวม Swarmify กับ Webflow เพื่อเร่งความเร็ววิดีโอเพื่อการมีส่วนร่วมของผู้ใช้ที่ดีขึ้นและ ยอดขายที่มากขึ้น!

เพื่อไม่ให้เป็นการเสียเวลา เรามาชั่งน้ำหนักสมอเรือกันก่อนดีกว่า :)

Webflow คืออะไร?

แล้วสัตว์ที่เราเรียกว่า Webflow คืออะไร? สำหรับมือใหม่ Webflow เป็นบริษัทอเมริกันที่ตั้งอยู่ในซานฟรานซิสโก

พวกเขาเสนอแพลตฟอร์ม Software as a Service (SaaS) สำหรับการสร้างเว็บไซต์และโฮสติ้ง ทั้งหมดนี้รวมอยู่ในแพ็คเกจเดียว

Webflow นำเสนอเครื่องมือสร้างเว็บไซต์แบบลากและวางที่ดีซึ่งใช้งานง่าย ยิ่งไปกว่านั้น ฟีเจอร์เหล่านี้ยังมีฟีเจอร์มากมายให้คุณสร้างเว็บไซต์ที่ตอบสนองได้ง่ายดายเหมือนใช้คำย่อ

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

แบรนด์ดังเช่น Zendesk, Dell, Rakuten และ Upwork ไว้วางใจ Webflow ซึ่งหมายความว่าคุณอยู่ในมือที่ปลอดภัย

ระหว่างคุณกับฉัน ฉันไม่เคยใช้เครื่องมือสร้างเว็บไซต์ที่ใช้งานง่ายแบบนี้มาก่อน Webflow ทำให้บริษัทต่างๆ เช่น Weebly, Squarespace และ Wix หลุดพ้นจากน้ำโดยสิ้นเชิง

และพวกเขาดื่ม Kool-Aid ของตัวเองด้วย เว็บไซต์อย่างเป็นทางการของ Webflow สร้างขึ้น คุณเดาได้เลย - Webflow!

คุณสมบัติหลักของเว็บโฟลว์

Webflow เป็นที่นิยมและเป็นที่รู้จักดีที่สุดสำหรับคุณสมบัติหลักดังต่อไปนี้

• เครื่องมือสร้างเว็บไซต์แบบลากและวางที่ใช้งานง่ายซึ่งช่วยให้คุณสร้างเว็บไซต์ได้ด้วยสายตา
• เทมเพลตสำเร็จรูปที่สวยงามมากมายที่คุณปรับแต่งได้จนกว่าคุณจะตก
• องค์ประกอบเว็บไซต์มากมาย
• ฟังก์ชันอีคอมเมิร์ซ
• โฮสติ้ง Amazon S3 ที่เร็วสุดและมีประสิทธิภาพ
• ไม่จำกัดสไตล์
• ความสามารถในการเพิ่มโค้ด HTML, CSS และ JS ที่กำหนดเอง
• แผนการกำหนดราคาที่ยืดหยุ่น
• ระบบจัดการเนื้อหาที่มีประสิทธิภาพ (CMS)
• การผสานการทำงานกับบุคคลที่สามจำนวนมาก
• แผนทดสอบน้ำฟรี
• การโต้ตอบและแอนิเมชั่นมากมาย
• เชื่อมต่อชื่อโดเมนที่กำหนดเอง
• ใช้โดเมนย่อย เช่น swarmify.webflow.io เพื่อโฮสต์ เว็บไซต์ฟรี
• การสนับสนุนอย่างมืออาชีพ

หากคุณเป็นนักพัฒนาเว็บส่วนหน้า (หรือแค่โจทั่วไป) ที่กำลังมองหาเครื่องมือสร้างเว็บไซต์ที่ใช้งานง่ายแต่ทรงพลัง เราขอแนะนำ Webflow เป็นอย่างยิ่ง

เป็นเครื่องมือที่สมบูรณ์แบบในการประหยัดเวลาและปรับปรุงวันทำงานที่ยุ่งอยู่แล้วของคุณ หากคุณเป็นผู้ใช้ Webflow อยู่แล้ว คุณรู้อยู่แล้วว่า Webflow เป็นเครื่องมือสร้างเว็บไซต์ที่สมบูรณ์แบบ

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

และในขณะที่ Webflow ใช้การโฮสต์ที่รวดเร็ว วิดีโอที่คุณใช้จาก YouTube หรือแหล่งอื่น ๆ จะบัฟเฟอร์และยังใช้เวลาในการโหลด

นี่คือที่มาของ Swarmify เราขอเสนอสิ่งที่คุณต้องการเพื่อเพิ่มประสิทธิภาพวิดีโอบนเว็บไซต์ Webflow ของคุณ ไม่ว่าคุณจะใช้ YouTube, Vimeo หรือไซต์อื่นๆ เพื่อโฮสต์วิดีโอของคุณ

Swarmify คืออะไร?

Swarmify เปิดตัวในปี 2013 เป็นแพลตฟอร์มเร่งความเร็ววิดีโอ บริการนี้ทำงานบนโครงสร้างพื้นฐานเดียวกันกับที่สตรีมมิ่งยักษ์ใหญ่เช่น Netflix และ Hulu ใช้

คุณสามารถจัดเก็บวิดีโอของคุณได้ทุกที่ที่ต้องการ และใช้ SmartVideo ของ Swarmify เพื่อส่งวิดีโอไปยังผู้ใช้ของคุณด้วยความเร็วที่รวดเร็ว

นี่คือตัวอย่างสถานการณ์สมมติเพื่อแสดงสิ่งที่ฉันหมายถึง:

• อัปโหลดวิดีโอไปยัง YouTube หรือ Vimeo เพื่อประโยชน์ทางสังคม และฝังบนเว็บไซต์ของคุณเช่นเคย
• รวม SmartVideo กับเว็บไซต์ของคุณโดยใช้ปลั๊กอิน WordPress หรือตัวอย่างข้อมูลด่วน
• SmartVideo ดาวน์โหลดวิดีโอ YouTube/Vimeo เบื้องหลังและอัปโหลดไปยังเครือข่ายการจัดส่งทั่วโลกของเรา
• SmartVideo ให้วิดีโอของคุณเร็วขึ้นในเครื่องเล่นวิดีโอที่ดูน่าทึ่ง
• ทุกอย่างเกิดขึ้นในพื้นหลังโดย อัตโนมัติ อันที่จริง SmartVideo จะแปลงวิดีโอ YouTube ทั้งหมดบนเว็บไซต์ของคุณโดยอัตโนมัติ ติดตั้งครั้งเดียวเท่านั้น!

SmartVideo ใช้ EdgeAI ภายในบริษัทเพื่อป้องกันการหยุดชะงักระหว่างการเล่น และโซลูชัน SmartCDN ที่ช่วยให้ผู้เยี่ยมชมของคุณเพลิดเพลินกับวิดีโอที่รวดเร็วและปราศจากบัฟเฟอร์ทุกที่ในโลก

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

คุณสมบัติหลักของ Swarmify

ผู้ใช้ Swarmify ชื่นชอบ SmartVideo ด้วยคุณสมบัติดังต่อไปนี้

• เครื่องเล่นวิดีโอที่สะอาด ไม่เกะกะ และปราศจากสิ่งรบกวน
• เริ่มต้นทันที - วิดีโอ SmartVideo เริ่มเล่นเร็วกว่าผู้เล่นอื่นโดยเฉลี่ย 12 เท่า (ดูการสาธิตของเราที่นี่)
• ปรับปรุงประสบการณ์การรับชมบนอุปกรณ์หลายเครื่อง
• การแปลง YouTube/Vimeo อัตโนมัติ - โฮสต์วิดีโอบน YouTube หรือ Vimeo อยู่แล้วใช่หรือไม่ SmartVideo แปลงโดยอัตโนมัติ
• การเพิ่มประสิทธิภาพการสตรีมอย่างต่อเนื่อง - ตลอดการเล่น SmartVideo จะตรวจสอบประสบการณ์วิดีโอของผู้ใช้แต่ละรายอย่างต่อเนื่องและ ป้องกันความล้มเหลวก่อนที่จะเกิดขึ้น
• การเล่นแบบไม่มีแผงลอย - SmartVideo ให้การบัฟเฟอร์ระหว่างการเล่นน้อยกว่าเครื่องเล่นอื่นโดยเฉลี่ยถึง 8 เท่า
• ทุกอย่างไม่จำกัด - เพลิดเพลินกับแบนด์วิดธ์และพื้นที่เก็บข้อมูลไม่จำกัด
• การสนับสนุนอย่างมืออาชีพโดยทีมนักพัฒนาที่กระตือรือร้น
• ติดตั้งและใช้งานง่าย
• อ่านเพิ่มเติมเกี่ยวกับคุณสมบัติของเราที่นี่

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

ที่กล่าวว่าความเร็วในการโหลดวิดีโอของคุณเป็นส่วนหนึ่งของการมอบประสบการณ์ผู้ใช้ที่ดีขึ้นบนเว็บไซต์ของคุณ

ในการมอบประสบการณ์วิดีโอที่รวดเร็วและปราศจากความล่าช้าบนเว็บไซต์ Webflow ของคุณ คุณต้องมีโซลูชัน เช่น SmartVideo

ด้วยวิดีโอที่รวดเร็ว คุณจะเพลิดเพลินกับการรักษาผู้ใช้ที่ดีขึ้น การแปลงที่มากขึ้น อัตราตีกลับที่ต่ำลง และยอดขายที่เพิ่มขึ้น เป็นเกมง่ายๆ

นอกจากนี้ใครอยากดูวิดีโอที่ใช้เวลาชั่วนิรันดร์และการเดินทางรอบดวงอาทิตย์เพื่อโหลด?

ไม่มีใครแน่นอน! ไม่แม้แต่คุณ

ให้เรารวม Swarmify เข้ากับเว็บไซต์ Webflow ของคุณเพื่อเร่งความเร็ววิดีโอของคุณและสร้างรอยยิ้มให้กับลูกค้าที่นับถือของคุณ

ไม่มี : ในการผสานรวม Swarmify กับ Webflow คุณต้องมีบัญชี Swarmify ที่ใช้งานอยู่และแผนแบบชำระเงินบน Webflow

ยังอยู่ในรั้ว? อย่าเป็น . ลงทะเบียนกับ Swarmify วันนี้และใช้ประโยชน์จาก ส่วนลดพิเศษ 50% ของเรา อยากรู้? ค้นหาข้อมูลเพิ่มเติมได้ที่นี่

ที่กล่าวว่า ให้เรารวมการโฮสต์วิดีโอของ Swarmify กับเว็บไซต์ Webflow ของคุณ

วิธีเพิ่ม Swarmify ให้กับ Webflow

'ก่อนที่เราจะไปที่ Webflow ให้เรากำหนดค่าข้อมูลโค้ด SmartVideo ของคุณก่อน เข้าสู่ระบบไปที่แดชบอร์ด Swarmify ของคุณแล้วคลิกการ กำหนดค่า ดังที่แสดงด้านล่าง

จากนั้นเลือกว่าคุณมีวิดีโอ YouTube บนเว็บโฟลว์ของคุณหรือไม่:

การเลือก ใช่ ด้านบนทำให้ SmartVideo แปลงวิดีโอ YouTube ทั้งหมดบนเว็บไซต์ Webflow ของคุณโดยอัตโนมัติ กดปุ่ม ถัดไป

ในหน้าจอถัดไป เลือกว่าไซต์ Webflow ของคุณมีวิดีโอพื้นหลังหรือไม่:

ต้องการเปลี่ยนสีของเครื่องเล่นวิดีโอของคุณเพื่อให้เข้ากับไซต์ Webflow ของคุณหรือไม่ คุณสามารถทำได้ในหน้าจอถัดไป:

กด ถัดไป

ถัดไป คุณสามารถเปลี่ยนรูปร่างของปุ่มเล่นได้หากต้องการ ฉันชอบปุ่มหกเหลี่ยมที่เป็นค่าเริ่มต้น แต่คุณมีตัวเลือกให้เลือกว่าสี่เหลี่ยมผืนผ้าหรือวงกลม:

จากนั้นเลือกลายน้ำที่กำหนดเองสำหรับวิดีโอของคุณ:

คุณเก่งด้านนี้ ฉันต้องยอมรับ :)

กด ถัดไป

ในหน้าจอถัดไป ให้เลือกว่าคุณต้องการขายโฆษณาในวิดีโอของคุณหรือไม่ และคลิก เสร็จสิ้น :

สุดท้าย คลิก Copy to Clipboard ดังที่แสดงด้านล่าง

ตอนนี้ ข้อมูลโค้ด SmartVideo ของคุณพร้อมสำหรับเว็บไซต์ Webflow แล้ว

อะไรต่อไป?

ตอนนี้เราจะเพิ่ม Swarmify ลงในเว็บไซต์ Webflow ของคุณ

นี่คือเว็บไซต์ตัวอย่างที่ฉันทำงานด้วยตามที่สัญญาไว้:

ฉันยืมวิดีโอ Jerusalema ที่มีชื่อเสียงจาก Openmic Productions เพลงและวิดีโอที่ยอดเยี่ยมโดยวิธีการ ผู้คนทั่วโลกกำลังท้าทายการเต้นของ เยรูซาเล ม

ฉันหวังว่าฉันจะเต้นได้

ต่อไป ให้เราเพิ่ม Swarmify ลงในเว็บไซต์ Webflow ของคุณ

เข้าสู่ระบบ Webflow:

ป้อนรายละเอียดและกดปุ่ม เข้าสู่ระบบ :

ถัดไป คลิกบนเว็บไซต์ที่คุณต้องการเพิ่ม SmartVideo:

ตอนนี้ คุณอยู่ในเครื่องมือสร้างเว็บไซต์ที่ใช้งานง่ายที่เราพูดถึงก่อนหน้านี้:

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

แล้วฉันจะทำอย่างไรเฟรดดี้?

คลิก ไอคอน Webflow (W) (เปลี่ยนเป็นเมนูแฮมเบอร์เกอร์เมื่อคุณวางเมาส์):

ถัดไป คลิก การตั้งค่าโปรเจ็ กต์ :

หลังจากนั้นกด Custom Code :

ใช่.

ถัดไป วางข้อมูลโค้ด SmartVideo ที่คุณคัดลอกไว้ก่อนหน้านี้ลงในส่วน รหัสหลัก แล้วคลิก บันทึกการเปลี่ยนแปลง ดังนี้:

ด้วยข้อมูลโค้ดนั้น Webflow ของคุณจะเชื่อมต่อกับ Swarmify วิดีโอ YouTube ทั้งหมดบนเว็บไซต์ของคุณจะถูกแปลงโดยอัตโนมัติ :)

เสร็จแล้ว.

ผลลัพธ์?

นี้:

สังเกตเครื่องเล่นวิดีโอใหม่ที่ไม่มีแบรนด์บุคคลที่สาม

ข้อควร จำ : หากคุณใช้ YouTube ให้ใช้การฝังแทนลิงก์โดยตรง เช่น https://www.youtube.com/embed/fCZVL_8D048 กับ https://www.youtube.com/watch?v=fCZVL_8D048

เคล็ดลับสำหรับมือโปร : โปรดใช้ลิงก์สำหรับฝัง ตรวจสอบให้แน่ใจว่าคุณใช้ลิงก์ฝังเมื่อเพิ่มวิดีโอลงในเว็บไซต์ Webflow ของคุณ

โฮสต์วิดีโอที่อื่น?

SmartVideo ช่วยคุณได้

ดู เว็บไซต์อัปโหลดวิดีโอที่ดีที่สุด 9 อันดับแรกและบริการที่เก็บข้อมูลบนคลาวด์

นี่คือลิงก์ที่แชร์ได้ : https://swarmify.com/blog/top-video-upload-sites-cloud-storage-services/

การเพิ่มแท็ก SmartVideo

คุณสามารถเพิ่มวิดีโอ SmartVideo ได้ทุกที่บนเว็บไซต์ Webflow โดยใช้แท็ก SmartVideo:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

เปิดหน้า Webflow ที่คุณต้องการแก้ไข สำหรับตัวอย่างของเรา ฉันจะแทนที่ส่วนฮีโร่ด้วยวิดีโอ เยรูซาเล มที่เราใช้ก่อนหน้านี้ อย่างไรก็ตาม คราวนี้ ฉันจะใช้แท็ก SmartVideo ด้านบนแทน

นี่คือลักษณะแท็ก SmartVideo ที่พร้อมใช้งานของฉัน:

 <smartvideo src="https://www.youtube.com/embed/fCZVL_8D048" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

สังเกตว่าฉันแทนที่ path/to/my/video.mp4 ด้วยลิงก์ฝังสำหรับวิดีโอ

จากนั้น คลิก Add (+) แล้วเลือก Embed ดังที่แสดงด้านล่าง:

ถัดไป วางแท็ก SmartVideo ของคุณแล้วคลิก บันทึกและปิด :

ตอนนี้ เมื่อฉันตรวจสอบเว็บไซต์ตัวอย่างในส่วนหน้า ฉันเห็นวิดีโอที่แปลงแล้ว:

ง่ายเหมือน A B C

บอกลา?

ผู้ใช้ Webflow จะพบว่า SmartVideo มีประโยชน์มาก SmartVideo เร่งความเร็ววิดีโอของคุณเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น

Swarmify SmartVideo นำเสนอวิดีโอที่เร็วกว่าค่าเฉลี่ยของอุตสาหกรรมถึง 12 เท่า คุณจะเพิ่มการแปลงและการขายของคุณด้วยวิดีโอที่เร็วขึ้น

สร้างวิดีโอเพิ่มเติมและเร่งความเร็วในครั้งต่อไปด้วย SmartVideo ของ Swarmify :)