<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频控制</title> <style> body { text-align: center; } div { margin-top: 20px; } </style> </head> <body> <h1 align="center">视频控制</h1> <div> <button id="play">播放</button> <button id="big">大</button> <button id="mid">中</button> <button id="small">小</button> </div> <div> <video controls="controls" id="va" width="300" ,height="300" src="bear.mp4"> </video> </div> <script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频控制</title> <style> body { text-align: center; } div { margin-top: 20px; } </style> </head> <body> <h1 align="center">视频控制</h1> <div> <button id="play">播放</button> <button id="big">大</button> <button id="mid">中</button> <button id="small">小</button> </div> <div> <video controls="controls" id="va" width="300" ,height="300" src="bear.mp4"> </video> </div> <script> var c = document.getElementById("va"); var btn_play=document.getElementById("play"); btn_play.onclick=function(){ if (btn_play.innerText=="播放") { c.play(); btn_play.innerText="暂停"; } else{ c.pause(); btn_play.innerText="播放"; } } document.getElementById("big").onclick=function() { c.width = "400" c.height = "400" } document.getElementById("mid").onclick=function() { c.width = "300" c.height = "300" } document.getElementById("small").onclick=function(){ c.width = "200" c.height = "200" } </script> </body> </html> </script> </body> </html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
