รหัสตัวอย่างควบคุม HTML5 แบบกำหนดเองโดยใช้ DOM

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

แน่นอนว่าเอฟเฟกต์นั้นไม่ได้สวยงามมาก หากคุณต้องการดูดีคุณสามารถตั้งค่าสไตล์ CSS ของคุณเอง ฯลฯ

<div>

<button> เล่น/หยุดชั่วคราว </kout>

<button> ใหญ่ </button>

<button> </ Button>

<button> เล็ก ๆ </utbout>

<video>

<ต้นทาง src = "demo.mp4" type = "video /mp4" />>>>

<ต้นทาง src = "demo.ogg" type = "video /ogg" />>

เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ HTML5 นี้

</video>

</div>

<script type = "text/javascript">

var myvideo = document.getElementById ("myvideo");

ฟังก์ชั่น playpause ()

-

ถ้า (myvideo.paused)

myvideo.play ();

อื่น

myvideo.pause ();

-

ฟังก์ชั่น tobig ()

-

myvideo.width = 560;

-

ฟังก์ชั่น tonormal ()

-

myvideo.width = 420;

-

ฟังก์ชั่น tosmall ()

-

myvideo.width = 320;

-

</script>

ควรสังเกตว่าในบรรดาคุณสมบัติทั้งหมดมีเฉพาะคุณสมบัติวิดีโอและวิดีโอคิวที่มีอยู่ทันที

มีคุณสมบัติอื่น ๆ หลังจากโหลดข้อมูลเมตาของวิดีโอแล้ว