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で質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
SUBMITボタンを表示させないでS...
-
submitボタンにvalue属性の値で...
-
メールフォームでの送信確認か...
-
HTML ラジオボタン nameの大文...
-
HTMLボタンの文字色を変え...
-
UWSC
-
checkboxとlabelがずれる
-
グーグルマップの文字化けで困...
-
getParameterで値が取得できず...
-
VBAでWebページのボタン操作が...
-
参照ボタンの横に大きさを揃え...
-
c# 文字列の最後から1文字削除...
-
オートマトンNFAからDFAへの変換
-
Excel:「フォーム」のボタンで...
-
Q&Aフォームを作成したいのです...
-
ブラウザの×ボタン判定
-
複数選択のListBoxでClickイベ...
-
コネクション・セッション・ト...
-
画面遷移が不正ですと表示されます
-
システム開発の工数と費用について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLボタンの文字色を変え...
-
submitボタンにvalue属性の値で...
-
checkboxとlabelがずれる
-
リンクでPOSTデータを送信する...
-
getParameterで値が取得できず...
-
SUBMITボタンを表示させないでS...
-
<FORM> </FORM> の中に さらに...
-
ボタンのなかに表示する文字を...
-
formでのtarget="_blank"2回目
-
INPUTのボタン周囲のスペース
-
戻ると、記入フォームの内容が...
-
チェックボックスの値をコピー
-
ボタンをクリックした時に、入...
-
HTMLのKEYとVALUE...
-
HTML ラジオボタン nameの大文...
-
HTMLでのid とnameの違い
-
formの送信ボタンをテキストに...
-
<form>中の<button>タグのv...
-
グーグルマップの文字化けで困...
-
input button の文字の色を2色...
おすすめ情報