Question

如何通过onClick更改多个视频src？我目前有一个视频标签

<video id="videofilmtv" width="480" height="270">
    <source src="movies/vid1.ogv" id="ogg1" type="video/ogg">
    <source src="movies/vid1.webm" id="webm1" type="video/webm">
    <source src="movies/vid1.mp4" id="mp41" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

链接

<a href="#" onClick="changevid(A);">

和javascript

var A = 'movies/vid2.ogv';
var B = 'movies/vid2.webm';
var C = 'movies/vid2.mp4';

function changevid(q) {
    if (changevid(A)) {
        document.getElementById('ogg1').setAttribute('src', A);
        document.getElementById('webm1').setAttribute('src', B);
        document.getElementById('mp41').setAttribute('src', C);
    }
}

它似乎不起作用。任何想法为什么？还是有另一种方式？感谢

Answer 1

我认为你误解了if()陈述的工作原理：

您需要改变您的状况以及调用该功能的方式才能发挥作用。

试试这个：

<强> HTML ：

<a href="#" onClick="changevid('A');">

<强> JS

var A = 'movies/vid2.ogv';
var B = 'movies/vid2.webm';
var C = 'movies/vid2.mp4';

function changevid(q) {
    if (q=='A') {
        //get the video element:
        var _VideoElement = document.getElementById('videofilmtv');
        //find out which of the currently playing sources is playing:
        var _CurrentlyPlayingFile = _VideoElement.currentSrc
        //check the filetype of the playing source:
        var _SourceFileType = _CurrentlyPlayingFile.substr(_CurrentlyPlayingFile.length-3, _CurrentlyPlayingFile.length)
        //check extension and apply new video accordingly
        if(_SourceFileType=="mp4"){
            //you cannot access the <source> children of the video, to change the 
            //video source you need to access the Video Element source directly.
            _VideoElement.setAttribute('src', C);
        }
    }
}

的 Live Example

Answer 2

您正在“changevid（）”函数中调用“changevid（）”函数。这导致函数被称为无限次，导致超过最大堆栈大小。

Answer 3

那个<source>元素不能像那样工作，我不相信。 <source>元素允许浏览器在将视频标记加载到页面中时选择要加载到video.src属性中的资源（即，什么视频格式）。我不认为更改source.src属性会在视频最初加载后执行任何操作。无论如何，我从来没有见过这么做过，但是因为我做了很多视频，所以已经有一段时间了。

要执行您要执行的操作，您需要使用video.canPlayType api来确定此设备/浏览器的正确视频格式，然后执行video.setAttribute('src', 'video2.X');其中X是其中一种格式可以通过此设备/浏览器播放。

Answer 4

我认为你需要这样的东西：

var link1 = ['movies/vid1.ogv', 'movies/vid1.webm', 'movies/vid1.mp4'];
var link2 = ['movies/vid2.ogv', 'movies/vid2.webm', 'movies/vid2.mp4'];

function changevid(q) {
    if (q==='A') {
        document.getElementById('ogg1').setAttribute('src', link1[0]);
        document.getElementById('webm1').setAttribute('src', link1[1]);
        document.getElementById('mp41').setAttribute('src', link1[2]);
    }
    else {
        document.getElementById('ogg1').setAttribute('src', link2[0]);
        document.getElementById('webm1').setAttribute('src', link2[1]);
        document.getElementById('mp41').setAttribute('src', link2[2]);
    }
}

<a href="#" onClick="changevid('A');">

您当前的IF声明在当前形式中没有意义。这将允许您在链接之间切换

通过onClick更改多个视频src

4 个答案: