HTMLで動画が動きません
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");
//ＳＰＡＮ(テキスト)の取得(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;
}
//ＶＩＤＥＯタグの幅をスライダーの値に変更(5)
video.width = document.form1.sizeRange.value;
//ＶＩＤＥＯタグの高さを計算(6)
video.height = video.width*(240/320);
//動画のサイズをテキストで表示(7)
sizeText.innerHTML = video.width + "*" + video.height;
}
</script>
</body>
お礼
丁寧な回答ありがとうございました。 これから活用していきたいと思います。