用js控制video的src
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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;.....以此类推
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控制视频播放的效果无误。
参考技术A //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。
本回答被提问者和网友采纳video.js切换视频源问题
什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法
两个重要点
一,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src
二,video.js插件的问题,
var myPlayer = videojs(‘my-video‘,{}
myPlayer.src(src)
myPlayer.load(src)
我看网上有人这么写,你不销毁上一个video.js实例,又创建了一个,页面会不错乱?不产生两个video?我是用不了
解决方案myPlayer.dispose()麻烦先销毁一下实例,再去创建新的
每个人的问题都不一样,别人遇到的解决方法终究只能给个思路
以上是关于用js控制video的src的主要内容,如果未能解决你的问题,请参考以下文章