Video-Playlist-v73-13
การเปลี่ยนแปลงที่สำคัญในส่วนนี้คือ:
- เพิ่มขนาดปุ่มเป็น 60×60 พิกเซล
- ใช้สีพื้นหลังที่เด่นชัด (#3498db – สีฟ้า)
- เพิ่ม box-shadow เพื่อให้ปุ่มดูลอยขึ้นมา
- เพิ่ม transition และ transform effects เพื่อให้ปุ่มมีการตอบสนองเมื่อ hover และ active
- เพิ่ม pulsing animation เพื่อดึงดูดความสนใจ
- ใช้ flexbox เพื่อจัดตำแหน่งไอคอนให้อยู่ตรงกลางปุ่ม
- แสดงปุ่มเฉพาะบนหน้าจอมือถือ (ขนาดไม่เกิน 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 มีความเด่นชัดมากขึ้น ดึงดูดความสนใจของผู้ใช้ และใช้งานได้ง่ายขึ้นบนอุปกรณ์มือถือ
การเปลี่ยนแปลงที่สำคัญ:
- ใน CSS:
- ทำให้
.custom-video-playlistเป็น fixed และครอบคลุมทั้งหน้าจอ - วาง
.video-player-containerไว้ด้านบนสุด - ทำให้
.playlist-containerอยู่ด้านล่างและสามารถเลื่อนขึ้นมาได้ - เพิ่มปุ่ม toggle สำหรับแสดง/ซ่อน playlist
- ทำให้
ข้อดีของการวางปุ่มที่มุมซ้ายล่าง:
- ง่ายต่อการเข้าถึงด้วยนิ้วโป้งสำหรับผู้ใช้ที่ถนัดมือขวา (ซึ่งเป็นคนส่วนใหญ่)
- ไม่บังเนื้อหาวิดีโอส่วนกลางหรือด้านขวา ซึ่งมักเป็นจุดสนใจหลัก
- อยู่ใกล้กับ controls อื่นๆ ทำให้ผู้ใช้สามารถควบคุมได้สะดวก
นี่คือโค้ดฉบับสมบูรณ์ของ Video Playlist v7.0 ที่รวมทั้ง HTML, CSS, และ JavaScript ไว้ในไฟล์เดียว โค้ดนี้ได้รวมการปรับปรุงทั้งหมดที่เราได้พูดคุยกัน รวมถึง:
- การรองรับหลาย playlist (แนะนำ, ยอดนิยม, มาใหม่)
- การสลับระหว่างซับไทยและพากย์ไทย
- การควบคุมแบบสัมผัสสำหรับอุปกรณ์มือถือ (swipe และ tap)
- การซ่อน/แสดงปุ่มควบคุมอัตโนมัติ
- การปรับปรุงการแสดงผลบนมือถือ
- ความโปร่งใสของ playlist
- การรองรับหลายแพลตฟอร์มวิดีโอ (YouTube, Dailymotion, OK.ru)
- ระบบค้นหาและการแบ่งหน้า (pagination)
- โหมดเต็มหน้าจอ
