Question

我在我的页面上创建了一个简单的视频库，其中包含4个缩略图视频和1个播放点击缩略图的播放器。

我写了一些javascript，允许用户点击触发功能的缩略图。然后，该功能将新视频SRC加载到<video>播放器中。现在这在Chrome中运行良好，但在Firefox中不适用于mp4格式。我认为将mp4简单地更改为ogg类型会使这两者都能正常工作。但它没有。

如何让以下JS工作，以便所有浏览器都支持ogg和mp4。

这是我创造的：

＆＃13;

var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
var oggVid = document.getElementById('oggSource');

function germanicosLoadVid() {
  player.pause();
  player.pause();
  mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
  oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
  player.load();
  player.play();
}

function platinumLoadVid() {
  player.pause();
  mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
  oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
  player.load();
  player.play();
}

function houseLoadVid() {
  player.pause();
  mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
  oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
  player.load();
  player.play();
}

＆＃13;

<video controls class="vid-center" id="videoPlayer" style="max-width:800px;">
    <source src="<?php the_field('video_file_1'); ?>" type="video/mp4"  id="mp4Source">
    <source id="oggSource" src="http://techslides.com/demos/sample-videos/small.o" type="video/ogg"/>
    Your browser does not support the video tag. 
    </video>

<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="houseLoadVid()" />
<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="platinumLoadVid()" />
<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="germanicosLoadVid()" />

＆＃13;

这里也是JSFiddle。

带有ogg回退的HTML5视频播放器库

0 个答案: