我正在尝试通过JS更改视频源。这主要是有效的。
var basename = "video/whatever";
$("#myvideo")[0].setSrc([
{type: "video/mp4", src: basename + ".mp4"},
{type: "video/webm", src: basename + ".webm"},
{type: "video/ogg", src: basename + ".ogv"}
]);
所以第一个问题:当我更改源时,暂停按钮显示而不是播放,并且即使暂停,也不会显示大叠加播放按钮。我已经尝试在setSrc调用之前和之后发送stop()和pause()以及setCurrentTime(0)的各种组合,但没有运气。
更重要的问题:我还没有办法改变视频的海报形象。我期待在API中看到一个方法来更改它,因为我希望它也可以更新Flash / Silverlight后备。我尝试只更改视频元素上的poster属性,但似乎没有。
答案 0 :(得分:1)
我知道这是一个相当古老的问题,但我想我会发布对我有用的答案。
var basename = "video/whatever";
// Where videoPlayer is the video element.
if(!videoPlayer.paused) {
videoPlayer.pause();
}
setTimeout(function(){
// Set poster image
$('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show();
// Set video source
videoPlayer.setSrc([
{type: "video/mp4", src: basename + ".mp4"},
{type: "video/webm", src: basename + ".webm"},
{type: "video/ogg", src: basename + ".ogv"}
]);
}, 0);
以下是对setTimeout正在做什么的一个很好的解释:https://stackoverflow.com/a/779785/1425269。
根据您使用的主题,您可能还需要一些海报图片的CSS。
.mejs-poster img {
padding: 0;
border: 0;
width: 100%;
height: auto;
}
答案 1 :(得分:0)
希望有所帮助!
答案 2 :(得分:0)
采取完全不同的方法。
方法1:
<video controls="controls" id="Player" height="200" width="600">
<source src="video.mp4">
<object id="Player" height=200" width="600" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!-- Windows Media Player Backup For IE -->
<param name="Showcontrols" value="True">
<param name="URL" value="video.mp4">
<param name="AllowShuffle" value="Yes">
<param name="autoStart" value="True">
<param name="Volume" value="100">
<param name="EnableContextMenu" value="False">
<!-- For browsers that do not support HTML5 Video -->
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player">
</object>
</video>
(<object>
标记用于IE,因为HTML 5视频并不总是正确呈现,或者有时不允许更改视频源)
更改所有浏览器中的源代码(不允许更改<video>
等src的IE除外)是访问document.getElementById("player").src="newvideo.mp4"
对于Internet Explorer,代码为:Player.url = "newvideo.mp4"
唯一可能提供其他问题的浏览器是Safari。
APPROACH 2 :(也可以和jQuery一起使用!)
<span id="myvideo2">
或<div id="myvideo2">
标记内。请务必提供ID,例如“myvideo2”document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/