用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的主要内容,如果未能解决你的问题,请参考以下文章

js 如何控制html里video标签的src视频

JS控制视频的播放

用JS控制video暂停再播放

用js如何控制 html5 video的快进后退。不要第三方插件。继续代码。

video.js切换视频源问题

Video.js 强制 Flash 控制显示