ОК, так что дело в том, что я начал создавать небольшой видеоплеер, который работает, щелкая элемент div с изображением, расширяя элемент div и изображение, а затем обменивает изображение тегом html5-video. код, как показано ниже.
(Это очень рано, поэтому я знаю, что многое нужно улучшить, например, не использовать javascript для установки стилей и т. Д., Но, тем не менее, приветствуются любые подсказки и подсказки, кроме ответа на основной вопрос)
/*Begin Expander*/
var $videoplayer = $('<video width="640" height="360" preload="none" controls="" tabindex="0" style="position: relative;"><source type="video/mp4" src="/restalive/movies/big_buck_bunny.mp4"></source><source type="video/ogg" src="/restalive/movies/big_buck_bunny.ogv"></source></video>').appendTo('body');
$videoplayer.hide();
$(".ExpandVideo").each(function(i){
var $trigger = $(this);
var $image = $trigger.find("img");
$image.css({
"width" : "100%"
,"height" : "auto"
})
$trigger.css({
"display" : "block"
,"overflow" : "hidden"
,"width" : "200px"
,"float" : "left"
});
$trigger.bind("click", function(e){
$trigger.animate({"width" : "640px"}, "fast", function(){
$image.replaceWith($videoplayer);
$videoplayer.show();
$videoplayer.attr("id", "video" + i);
var video = document.getElementById("video" + i);
video.play();
})
})
});
Однако основная проблема заключается в том, что когда я запускаю подобное видео (video.play ()), собственные элементы управления перестают работать, я больше не могу приостанавливать видео, даже если они есть, и кликабельно, видео просто начинает воспроизводиться сразу же, когда я пытался приостановить его.
Какой позор, потому что я хочу использовать нативные элементы управления для простоты.