More
    Video Playlist v8.3

    Video-Playlist-v73-13

    การเปลี่ยนแปลงที่สำคัญในส่วนนี้คือ:

    1. เพิ่มขนาดปุ่มเป็น 60×60 พิกเซล
    2. ใช้สีพื้นหลังที่เด่นชัด (#3498db – สีฟ้า)
    3. เพิ่ม box-shadow เพื่อให้ปุ่มดูลอยขึ้นมา
    4. เพิ่ม transition และ transform effects เพื่อให้ปุ่มมีการตอบสนองเมื่อ hover และ active
    5. เพิ่ม pulsing animation เพื่อดึงดูดความสนใจ
    6. ใช้ flexbox เพื่อจัดตำแหน่งไอคอนให้อยู่ตรงกลางปุ่ม
    7. แสดงปุ่มเฉพาะบนหน้าจอมือถือ (ขนาดไม่เกิน 768px)

    นอกจากนี้ คุณอาจต้องการปรับปรุง HTML ของปุ่มเล็กน้อยเพื่อเพิ่มความชัดเจน:

    html
    <button class="playlist-toggle" id="playlistToggle-{PLAYLIST_ID}" aria-label="Toggle Playlist">
    <i class="fas fa-list"></i>
    </button>

    การเพิ่ม aria-label จะช่วยปรับปรุงการเข้าถึงสำหรับผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ

    คุณสามารถนำ CSS นี้ไปแทนที่ส่วนที่เกี่ยวข้องกับ .playlist-toggle ในไฟล์ CSS หลักของคุณ หรือเพิ่มเติมลงไปในส่วน <style> ของ HTML ที่มีอยู่แล้ว

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

     

    การเปลี่ยนแปลงที่สำคัญ:

    1. ใน CSS:
      • ทำให้ .custom-video-playlist เป็น fixed และครอบคลุมทั้งหน้าจอ
      • วาง .video-player-container ไว้ด้านบนสุด
      • ทำให้ .playlist-container อยู่ด้านล่างและสามารถเลื่อนขึ้นมาได้
      • เพิ่มปุ่ม toggle สำหรับแสดง/ซ่อน playlist

     

    ข้อดีของการวางปุ่มที่มุมซ้ายล่าง:

    1. ง่ายต่อการเข้าถึงด้วยนิ้วโป้งสำหรับผู้ใช้ที่ถนัดมือขวา (ซึ่งเป็นคนส่วนใหญ่)
    2. ไม่บังเนื้อหาวิดีโอส่วนกลางหรือด้านขวา ซึ่งมักเป็นจุดสนใจหลัก
    3. อยู่ใกล้กับ controls อื่นๆ ทำให้ผู้ใช้สามารถควบคุมได้สะดวก

    นี่คือโค้ดฉบับสมบูรณ์ของ Video Playlist v7.0 ที่รวมทั้ง HTML, CSS, และ JavaScript ไว้ในไฟล์เดียว โค้ดนี้ได้รวมการปรับปรุงทั้งหมดที่เราได้พูดคุยกัน รวมถึง:

    1. การรองรับหลาย playlist (แนะนำ, ยอดนิยม, มาใหม่)
    2. การสลับระหว่างซับไทยและพากย์ไทย
    3. การควบคุมแบบสัมผัสสำหรับอุปกรณ์มือถือ (swipe และ tap)
    4. การซ่อน/แสดงปุ่มควบคุมอัตโนมัติ
    5. การปรับปรุงการแสดงผลบนมือถือ
    6. ความโปร่งใสของ playlist
    7. การรองรับหลายแพลตฟอร์มวิดีโอ (YouTube, Dailymotion, OK.ru)
    8. ระบบค้นหาและการแบ่งหน้า (pagination)
    9. โหมดเต็มหน้าจอ

    Leave a reply

    กรุณาใส่ความคิดเห็นของคุณ!
    กรุณาใส่ชื่อของคุณที่นี่

    ตาดูดาว ลืมมองทาง custom-video-playlist custom-video-playlist-v84

    spot_img