0

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

单击后，不同的播放器将加载到同一视频 div 并替换 youtube 版本。

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

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

谢谢！！

4

4 回答 4

1

您可以使用以下命令清除 div：

$("#yourDivID").empty()

然后用新内容填充 div

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

或者

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

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

于 2013-03-21T14:26:21.367 回答
0

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
    });


})

看这里的例子。

于 2013-03-21T14:26:55.667 回答
0

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);
    }
});

查看示例

于 2013-03-21T14:43:19.043 回答
0

非常感谢大家的帮助。喜欢这个地方。

实际上，我只需切换包含两个不同视频的 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 试过这个，所以当 div 被切换时，youtube 视频将被删除并停止播放

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

  });
});

这可行，但我不确定如何在切换回来时添加 youtube 视频。没什么大不了的——只是我很好奇。我假设它可以用.append 来完成。

问题在于这两个 vids 都作为简码存在于 wordpress 页面中，所以它使事情变得有点复杂。我只是在 wordpress 页面中使用这些 id 将 shortdoces 包装在 div 中，以使切换正常工作，并将 js 添加到我的页面模板中。再次感谢！

于 2013-03-21T20:09:27.203 回答