播放器/ iFrame切换器 - javascript / jquery

问题描述 投票:0回答:1

我正在为我的wordpress网站建立一个“播放器切换器”。我已经有了一个有效的代码,但它仅适用于iframe。

现在我有这个HTML:

<div class="tab_box" style="display: block;">

<iframe id="show" src="url1" frameborder="0" allowfullscreen=""></iframe>

<ul class="play">
 <li class="btn" id="url1">Link 1</li>
 <li class="btn" id="url2">Link 2</li>
 <li class="btn" id="url3">Link 3</li>
</ul>

</div>

和JavaScript:

<script type="text/javascript">
    $(function(){
        $(".btn").click(function(){
        x=$(this).attr('id');
            forOk=x.indexOf("videoembed");
            if(forOk==0)
            {x="//ok.ru/"+x;}
        $(".btn").removeClass('main');
        $(this).addClass( "main" )
        $("#show").attr('src',x);       
        });
    });
</script>

这适用于iframe源码,但我想在我的html5播放器(playerjs.com)中使用直接的.mp4链接

html5播放器代码是这样的:

<div id="player"></div>
<script>
   var player = new Playerjs({id:"player", file:"video.mp4"});
</script>

我需要做的就是修改JavaScript,以便替换“src”而不是替换“new Playerjs”中的“file”值。

javascript jquery html css html5
1个回答
-1
投票

你也可以使用iframe integration。只需将您的播放器放在100%覆盖的页面上即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title></title> 
      <script src='playerjs.js' type='text/javascript'></script>
   </head>
   <body>
   <style>
      html,body{
         margin:0;padding:0;width:100%;height:100%;
      }
   </style>
        
   <div id="playerjs" style="width:100%;height:100%;"></div>
        
   <script type="text/javascript">
      var ps = location.href.substr(location.href.indexOf("html?")+5).split("&");
      var vs = {id:"playerjs"};  
      for(var i = 0; i<ps.length; i++){
         var p = ps[i].substr(0,ps[i].indexOf("="));
         var v = ps[i].substr(ps[i].indexOf("=")+1);
         if(p!=v){
            vs[p] = decodeURIComponent(v);
         }
      }
      if(vs.file){
         var playerjs = new Playerjs(vs);
      }
   </script>
</body>
</html>

例如,您将此代码放在embed.html文件中并将其放在播放器文件夹中。在同一文件夹中应该是播放器的文件(playerjs.js)。您嵌入到网页中的iframe代码如下:

<iframe src="//site.com/player/embed.html?file=VIDEO_URL&poster=POSTER_URL&title=TEXT" type="text/html" width=100% height=100% frameborder="0" allowfullscreen></iframe>

播放器变量(文件,海报等)可以在iframe查询字符串中传递。

© www.soinside.com 2019 - 2024. All rights reserved.