仕事先で、動画の幅を固定させたいとの依頼がありました。
そんなことできるのかなーと思ったらありましたw
検索したけどなかなかなかったので、引用してペタリと貼っておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8> <title>video要素、audio要素をJavaScriptから操作する サンプル</title> </head> <body onLoad="getDuration()"> <video id="video" width="400" height="300"> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> </video> <div style="width:400px; background-color:#333333; color:#ffffff;"> <input type="button" value="再生" onClick="playVideo()"> <input type="button" value="一時停止" onClick="pauseVideo()"> <input type="button" value="↑" onClick="upVolume()"> <input type="button" value="↓" onClick="downVolume()"><br> 現在(秒):<span id="ichi">0</span><br> 全体(秒):<span id="nagasa"></span><br> <span id="kanryou"></span> </div> <script type="text/javascript"> var v = document.getElementById("video"); function getDuration() { //動画の長さ(秒)を表示 document.getElementById("nagasa").innerHTML = v.duration; } function playVideo() { //再生完了の表示をクリア document.getElementById("kanryou").innerHTML = ""; //動画再生 v.play(); //現在の再生位置(秒)を表示 v.addEventListener("timeupdate", function(){ document.getElementById("ichi").innerHTML = v.currentTime; }, false); //再生完了を知らせる v.addEventListener("ended", function(){ document.getElementById("kanryou").innerHTML = "動画の再生が完了しました。"; }, false); } function pauseVideo() { //動画一時停止 v.pause(); } function upVolume() { //音量上げる v.volume = v.volume + 0.25; } function downVolume() { //音量下げる v.volume = v.volume - 0.25; } </script> </body> </html>
javascriptを多少かじっている人ならなんとなくわかると思います♪
30分かけてこのサイト見つけた時は、結構嬉しかったです♪
よかったら使ってみて下さい。