การปรับแต่งหน้าตา

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

เพิ่มคลาสที่อีลิเมนต์ <video> จากเดิม video-js byteark-skin ให้ระบุชื่อคลาสใหม่ที่จะใช้เพิ่มเติม เช่น video-js byteark-skin branded-skin

จากนั้นจึงเขียน CSS เพิ่มเติมโดยใช้คลาสที่สร้างขึ้น

การปรับแต่ง progress bar

คุณสามารถกำหนดสไตล์ให้กับคลาสต่อไปนี้เพื่อปรับแต่ง progress bar

• vjs-progress-control สำหรับแถบโดยรวมทั้งหมด
• vjs-play-progress สำหรับแถบแสดงส่วนที่เล่นไปแล้ว
• vjs-load-progress สำหรับแถบแสดงส่วนที่ได้ buffer มาแล้ว

ตัวอย่างเช่น

.branded-skin .vjs-play-progress,
.branded-skin .vjs-progress-control:hover .vjs-progress-holder .vjs-play-progress {
    background-color: #669900;
}
.branded-skin .vjs-load-progress {
    background-color: #fff;
}