ตัวอย่างการทำวิดีโออยู่พื้นหลัง เพื่อทำให้สกอร์บอร์ดลอยอยู่เหนือวิดีโอ เมื่อเรากด F11 จะทำให้เว็บบราวเซอร์เข้าโหมด Full screen ก็จะได้ภาพวิดีโอเต็มหน้าจอ และมีส่วนของ Score Board ติดอยู่กับจอด้านล่าง และสามารถเพิ่มปุ่มควบคุมต่างๆ เช่น ปุ่มควบคุมวิดีโอ ปุ่มเปิด/ปิดความคิดเห็น และอื่นๆที่ต้องวางไว้บนวิดีโอได้อีกด้วย ภาพประกอบจาก Youtube : https://www.youtube.com/channel/UCDPsA3tAYGUrBM2KVhuv0ow/featured ส่วนของ HTML <div id="fullScreenDiv"> <img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video"> <div id="videoDiv"> <video id="video" preload autoplay muted playsinline loop> <source src="video/t12.webm" type="video/webm"></source> <source src="video/t12.mp4" type="video/mp4"></source> </video>
สำหรับตัวอย่างนี้จะเป็นการ JOIN ตาราง 2 ตาราง 1. tb_reject_hd 2. tb_reject_desc ซึ่งจะเชื่อมกันด้วยฟิลด์ docno จะเห็นว่าเราสามารถคิวรี่เรียกข้อมูลออกมาได้ตอนที่ยังไม่ใส่ ORDER BY แต่เมื่อใส่ ORDER BY เข้าไป จะหมุนค้างจนหน้าเว็บหยุดทำงาน จากนั้นก็ลองเพิ่ม INDEX ให้กับฟิลด์ docno ในตาราง tb_reject_desc ซึ่งในตัวอย่างนี้จะสร้างตารางใหม่ขึ้นมาจากตารางเดิม เปลี่ยนชื่อเป็น tb_reject_desc_with_index และทำการเพิ่ม INDEX KEY เข้าไป เมื่อทดสอบคิวรี่แบบมี ORDER BY จะเห็นว่าสามารถแสดงผลได้ทันที จากการสังเกตตัวเลขเวลาในการประมวลผล จะเห็นได้ว่าแบบไม่ใช้ ORDER BY จะทำงานเร็วกว่า แต่ในการทำงานส่วนใหญ่ก็มักจะต้องใช้ ORDER BY อย่างหลีกเลี่ยงไม่ได้ เช่นกรณีค้นหา แบบเรียงลำดับ ตัวอย่างโค้ดคิวรี่ข้อมูลจากตารางที่ Add Index Key แล้ว <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Add Index Key</title> </head> <body> <h2>ORDER BY with INDE