Question

我正在努力将视频添加到我正在处理的网站的主页上。理想情况下，我想默认显示youtube版本，并在其下方添加一个按钮，上面写着“无权访问youtube？点击此处观看备用版本”。

点击后，其他播放器将加载到同一视频div并替换youtube版本。

我们将视频上传到youtube，并在网站上有一个html5版本，通过wordpress的video.js插件播放。

如何通过单击按钮将备用html5视频播放器加载到div中（如果可能，不刷新页面）？我假设这可以通过javascript / jquery / ajax以某种方式完成，但我不知道该怎么做（我的js级别是新手）。

谢谢！

Answer 1

你可以用以下方式清除div：

$("#yourDivID").empty()

然后用新内容填充div

var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);

或者

$("#yourDivID").html(newHtml);

以下是替换Div中内容的非常原始的示例：http://jsfiddle.net/FJuwd/

Answer 2

Html

<div id="myvideodiv"> </div>

在剧本中

mybutton.click(function(){

    playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });


})

请在此处查看example。

Answer 3

jQuery解决方案：只需创建div并按下按钮即可填充视频。许多方法可以做到这一点。检查长度只是为了消除另一个视频。

<div id="player"><div>
<button id="clickme">Click to play video</button>   

 $("#clickme").on("click", function(e) {
    if($('#myfileplayer').length == 0) {
        var mydiv = $("#player");
        var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
        mydiv.append(myvideo);
    }
});

请参阅example

Answer 4

非常感谢所有人的帮助。喜欢这个地方。

我实际上可以通过切换包含两个不同视频的div来更轻松地解决这个问题。不知道为什么我最初没想到这个。实际上并没有删除内容，只是隐藏它，但我认为它对我有用。

HTML

<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>

<input type="button" value="switch video" id="click"/>

jquery的

$(function(){
  $('#click').click(function(){
     $('#youtube').toggle();
     $('#html5').toggle(); 
  });
});

我也用js尝试了这个，所以youtube视频将被删除＆amp;当div被切换时停止播放

$(function(){
  $('#click').click(function(){
     $('#youtube').toggle();
     $('#html5').toggle(); 
     $('#youtube').empty();

  });
});

这有效，但我不知道如何在切换回时添加YouTube视频。并不是什么大不了的事 - 只是我很好奇的事情。我假设它可以用.append完成。

这个问题是两个视频都存在于wordpress页面中作为短代码，因此它使事情变得复杂。我只是在words页面中将这些ids中的shortdoces包装起来以使切换工作，并将js添加到我的页面模板中。再次！！

单击按钮将其他视频播放器加载到div中

4 个答案: