我正在为我的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”值。
你也可以使用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查询字符串中传递。