HTMLで、動画をbutton要素とスライダーで再生かつ一時停止するプログラムと 音量を調整するプログラム、サイズ変更するプログラムを組んだのですが、サイズ変更はできるものの動画が動かず制止したままです。プログラムは間違っていないかと思うのですが、なぜ動かないのでしょうか・・
どこが間違っているのかわかりません。わかるかたがいましたら、教えてください。
bodyの部分のソースはこれです。
<body>
<form name="form1">
<input type="button" name="playButton" value="Play" onClick="changePlay()">
<input type="range" name="timeRange" min="0" step="0.1" value="0" onChange="changeTime()">
Time:<span id="timeText"></span>
<br>
<input type="button" name="muteButton" value="Mute" onClick="changeMute()">
<input type="range" name="volumeRange" min="0" max="1" step="0.1" value="1" onChange="changeVolume()">
Volume:<span id="volumeText">1</span>
<br>
<input type="button" name="sizeButton" value="Full Size" onClick="changeSize(true)">
<input type="range" name="sizeRange" min="320" step="1" value="320" onChange="changeSize(false)">
Size:<span id="sizeText">320*240</span>
</form>
<hr>
<video id="video1" width="320" height="240" poster="sample1.jpg">
<source src="sample1.mp4">
<source src="sample1.webm">
</video>
<script type="text/javascript">
// ビデオの取得
var video = document.getElementById("video1");
//SPAN(テキスト)の取得(1)
var volumeText = document.getElementById("volumeText");
var timeText = document.getElementById("timeText");
var sizeText = document.getElementById("sizeText");
//再生/一時停止の切り替え関数
function changePlay(){
//停止中かどうかで処理を切り替える
if(video.paused){
//再生
video.play();
//ボタンのラベルをPauseに変更
document.form1.playButton.value = "Pause";
}else{
//一時停止
video.pause();
//ボタンのラベルをPlayに変更
document.form1.playButton.value = "Play";
}
}
//消音/消音解除の切り替え関数
function changeMute(){
//消音状態かどうかで処理を切り替える
if (video.muted){
//消音解除
video.muted = false;
//ボタンのラベルをMuteに変更
document.form1.muteButton.value = "Mute";
}else{
//消音
video.muted = true;
//ボタンのラベルをspeakerに変更
document.form1.muteButton.value = "Speaker";
}
}
//音量を変更する関数
function changeVolume(buttonClick){
//音量をスライダーの値に変更
video.volume = document.form1.volumeRange.value;
//音量(0.0~1.0)をテキストで表示
volumeText.innerHTML = video.volume;
}
//再生位置を変更する関数
function changeTime(){
//再生位置の変更
video.currentTime = document.form1.timeRange.value;
}
//再生中イベントの登録
video.addEventListener("timeupdate", showTime, false);
//再生位置を表示する関数
function showTime(){
//スライダーの最大値に動画の長さを指定
document.form1.timeRange.max = video.duration;
//スライダーの値を再生位置に変更
document.form1.timeRange.value = video.currentTime;
//再生位置/長さをテキストで表示
timeText.innerHTML = Math.round(video.currentTime) + "s/" + Math.round(video.duration) + "s";
}
//動画サイズを変更する関数(2)
function changeSize(full){
//スライダーの最大値をブラウザーの幅に変更(3)
document.form1.sizeRange.max = document.body.clientWidth;
//最大化ボタンをクリックしたときの処理(4)
if (full){
//スライダーの値をブラウザーの幅に変更
document.form1.sizeRange.value = document.body.clientWidth;
}
//VIDEOタグの幅をスライダーの値に変更(5)
video.width = document.form1.sizeRange.value;
//VIDEOタグの高さを計算(6)
video.height = video.width*(240/320);
//動画のサイズをテキストで表示(7)
sizeText.innerHTML = video.width + "*" + video.height;
}
</script>
</body>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLについて教えてください。 ...
-
選択によって処理の変更
-
HTMLボタンの文字色を変え...
-
jqueryで診断テストはつくれま...
-
ボタンを押すと、テキストエリ...
-
ボタンのなかに表示する文字を...
-
チェックボックスの値をコピー
-
submitボタンの横幅を小さくし...
-
Accessの画面更新を一時的に停...
-
DVD-Rの「セッションを閉じる」...
-
DataGridViewのチェックボック...
-
ASPで画面間のパラメタ受け渡し
-
HTTPリクエストヘッダーの設定...
-
PreTranslateMessageで音がする
-
コネクション・セッション・ト...
-
VBAでHTTPログイン
-
指定されるdiv の部分の再読み...
-
エクセルVBAで画面の大きさを取...
-
aspxをhtmlに変換する方法について
-
Webページ上のボタン等の位置を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLボタンの文字色を変え...
-
submitボタンにvalue属性の値で...
-
checkboxとlabelがずれる
-
getParameterで値が取得できず...
-
ボタンのなかに表示する文字を...
-
ただいま勉強始めたての初心者...
-
formの送信ボタンをテキストに...
-
htmlでsubmit送信時、actionよ...
-
SUBMITボタンを表示させないでS...
-
リンクでPOSTデータを送信する...
-
inputのtextとsubmitの高さがズ...
-
戻ると、記入フォームの内容が...
-
チェックボックスの値をコピー
-
削除ボタンを押すとperlにてデ...
-
<FORM> </FORM> の中に さらに...
-
グーグルマップの文字化けで困...
-
submitボタンを横一列複数リン...
-
UWSC
-
HTMLのKEYとVALUE...
-
[]を付けずにcheckboxの値を複...
おすすめ情報