我正在尝试使用javascript更改mediaelement.js中的视频。
我的功能在第一次启动所选视频时效果很好。但是,如果我再次调用该函数,它似乎会忽略该调用,尽管新路径是正确的。当我直接使用HTML5时,视频会重新加载(请参阅评论的player1.src等),但这不会将mediaelement.js的好处用于后备和格式化。
我忘记了什么?我是否需要清除以前的实例,如果是这样的话?
谢谢,
杰
<script type='text/javascript'>
function playVideo(videopath)
{
var myVideo = document.getElementById(videopath).value;
var myVideopath = “/Library/"+encodeURIComponent(myVideo);
// player1.src = myVidiopath;
// player1.load();
// player1.play();
var v = document.getElementsByTagName("video")[0];
var player2 = new MediaElementPlayer
(v,
{
success: function(media, domObject)
{
media.setSrc(myVidiopath);
media.load();
media.play();
}
}
);
}
</script>
<table>
<tr><td width="500">
<div id="avplayer" class="container">
<video id="player1" width="480" height="320" poster="/acds/files/logo_cube.png"
controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="480" height="320" type="application/x-shockwave-flash"
data="/acds/scripts/videoPlayer/flashmediaelement.swf">
<param name="movie" value="/acds/scripts/videoPlayer/flashmediaelement.swf" />
<param name="flashvars"
value="controls=true&poster=/acds/files/logo_cube.png" />
<!-- Image as a last resort -->
<img src="/acds/files/logo_cube.png" width="480" height="320" title="No video
playback capabilities" />
</object>
</video>
</div>
</td><td width="200">
<table>
<tr><td><button id='PlayA' style='WIDTH: 160px; HEIGHT: 24px' type='button'
onclick='playSound("ShowVidA")' >Play Lesson VideoA</button></td></tr>
<tr><td><button id='PlayB' style='WIDTH: 160px; HEIGHT: 24px' type='button'
onclick='playSound("ShowVidB")' >Play Lesson VideoB</button></td></tr>
<tr><td><button id='PlayC' style='WIDTH: 160px; HEIGHT: 24px' type='button'
onclick='playSound("ShowVidC")' >Play Lesson VideoC</button></td></tr>
<tr><td><button id='PlayD' style='WIDTH: 160px; HEIGHT: 24px' type='button'
onclick='playSound("ShowVidD")' >Play Lesson VideoD</button></td></tr>
</table>
</td></tr>
</table>
答案 0 :(得分:0)
你应该重复使用player2对象,而不是每次都创建新对象......
<script type='text/javascript'>
var player2=false;
function playVideo(videopath)
{
var myVideo = document.getElementById(videopath).value;
var myVideopath = “/Library/"+encodeURIComponent(myVideo);
var v = document.getElementsByTagName("video")[0];
if (typeof(player2)!='object')
{
player2 = new MediaElementPlayer(v, {
success: function(media, domObject)
{
media.setSrc(myVidiopath);
media.load();
media.play();
}
});
}
else
{
player2.setSrc(myVidiopath);
player2.load();
player2.play();
}
}
</script>