Question

用js控制video的src

代码如下
<section id="player">
<video id="media" width="100%" height="100%" controls>
<source id="v1" src="video/1.mp4">
</video>
</section>

<div class="container" width="100%" style="margin-top:20px">
<button class="btn span2">第一章</button>
<button class="btn span2">第二章</button>
<button class="btn span2">第三章</button>
<button class="btn span2">第四章</button>
</div>
我现在想点第一章按钮时，播放video/1.mp4;点击第二章按钮时，播放video/2.mp4;.....以此类推

Answer 1

1、首先需要新建一个html文件，命名为test.html，用于介绍如何使用JS控制video视频的src。

2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。

5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件，测试js控制视频播放的效果无误。

Answer 2

//js部分
window.onload=function(){
	document.getElementById("u1").onclick=function(){
		document.getElementById("v1").src="video/1.mp4";
		document.getElementById("media").load();
	}
	document.getElementById("u2").onclick=function(){
		document.getElementById("v1").src="video/2.mp4";
		document.getElementById("media").load();
	}
	document.getElementById("u3").onclick=function(){
		document.getElementById("v1").src="video/3.mp4";
		document.getElementById("media").load();
	}
	document.getElementById("u4").onclick=function(){
		document.getElementById("v1").src="video/4.mp4";
		document.getElementById("media").load();
	}
}

<!-- html部分 -->
<section id="player">
    <video id="media" width="100%" height="100%" controls>
	    <source id="v1" src="video/1.mp4">
    </video>
</section>

<div class="container" width="100%" style="margin-top:20px">
    <button id="u1" class="btn span2">第一章</button>
    <button id="u2" class="btn span2">第二章</button>
    <button id="u3" class="btn span2">第三章</button>
    <button id="u4" class="btn span2">第四章</button>
</div>

HTML部分没有改动，只是给按钮加了ID。