您好我已經想如果使用jQuery和所遇到的問題的HTML5視頻播放器的改變src:爲什麼html5和flash fallover只會在使用jquery替換html時被刷新?
雖然以下更改源:
$(document).ready(function() {
$('.featureLogoText').click(function (e) {
var media = $(this).attr('media');
var mediamp4 = media + "mp4";
var mediawebm = media + "webm";
var mediaogv = media + "ogv";
var newPoster = $(this).attr('data-poster');
$('.scrPoster').attr('poster', newPoster);
$('.scrVideomp4').attr('src', mediamp4);
$('.scrVideowebm').attr('src', mediawebm);
$('.scrVideogg').attr('src', mediaogv);
$("#scrVideomp4").load();
$("#scrVideowebm").load();
$("#scrVideogg").load();
$('.firstFrameFlash').attr('src', newPoster);
// $('embed').attr('flashparam', 'config={"playitem":[{"url":"http://localhost/test.flv","autoPlay":false}]}');
$(".scrPoster > object > embed").attr("src", media + ".mp4");
});
});
HTML:
<div class="divVideoWrapper">
<div class="divVideo">
<div class="divVideoContainer">
<div class="video_player">
<video class="scrPoster" controls="controls" poster="http://static.e-talemedia.net/content/images/frame3.png">
<source id="scrVideomp4" class="scrVideomp4" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4"
type="video/mp4" />
<source id="scrVideowebm" class="scrVideowebm" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.webm"
type="video/webm" />
<source id="scrVideogg" class="scrVideogg" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.ogv"
type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="352" height="198">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param class="flashparam" name="flashVars" value="config={'playlist':['http://static.e-talemedia.net/content/images/frame3.png',{'url':'http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4','autoPlay':false}]}" />
<img class="firstFrameFlash" alt="Bosch Features" src="http://static.e-talemedia.net/content/images/frame3.png"
width="352" height="198" title="No video playback capabilities, please download the video below" />
</object>
</video>
<div class="custom_controls">
<div class="divBigButton">
<a class="playBig" title="playBig"></a>
</div>
<a class="play" title="Play"></a><a class="pause" title="Pause"></a>
<div class="volumeWrapper">
<div class="volume">
<div class="volume_slider">
</div>
<a class="mute" title="Mute"></a><a class="unmute" title="Unmute"></a>
</div>
</div>
<div class="timer">
00:00</div>
<div class="time_slider">
</div>
</div>
</div>
<script>
$(function() {
$('.video_player').myPlayer();
});
</script>
</div>
當我點擊視頻播放器上的播放時,它會播放舊視頻而不是新視頻。
我想
$("#scrVideomp4").load();
可以解決這個問題,但它不不像是會。
因此,點擊我希望它停止播放的視頻並將其更改爲新的視頻。
我錯過了什麼嗎?
編輯
,因爲我使用HTML5視頻和Flash我試圖消除在videocontainer DIV的HTML,然後用新的HTML替代它,如下所示:
$(文件)。就緒(功能(){
$('.featureLogoText').click(function (e) {
var media = $(this).attr('media');
var mediamp4 = media + "mp4";
var mediawebm = media + "webm";
var mediaogv = media + "ogv";
var newPoster = $(this).attr('data-poster');
var html = ' <video class=\"scrPoster\" controls=\"controls\" poster=\"' + newPoster + '\"><source id=\"scrVideomp4\" class=\"scrVideomp4\" src=\"' + mediamp4 + '\" type=\"video/mp4\" /><source id=\"scrVideowebm\" class=\"scrVideowebm\" src=\"' + mediawebm + '\" type=\"video/webm\" /><source id=\"scrVideogg\" class=\"scrVideogg\" src=\"' + mediaogv + '\" type=\"video/ogg\" /><object width=\"352\" height=\"198\"><param name=\"movie\" value=\"http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf\" type=\"application/x-shockwave-flash\"allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"352\" height=\"198\" flashvars=\"src=' + mediamp4 + '&poster=' + newPoster + '\"></embed></object></video><div class=\"custom_controls\"><div class=\"divBigButton\"><a class=\"playBig\" title=\"playBig\"></a></div><a class=\"play\" title=\"Play\"></a><a class=\"pause\" title=\"Pause\"></a><div class=\"volumeWrapper\"><div class=\"volume\"><div class=\"volume_slider\"></div><a class=\"mute\" title=\"Mute\"></a><a class=\"unmute\" title=\"Unmute\"></a></div></div><div class=\"timer\">00:00</div><div class=\"time_slider\"></div></div>';
alert(html);
$("#videoPlayerChange").html("");
$("#videoPlayerChange").append(html);
});
});
這項工作在某種意義上說,新的視頻現在效力,但由於某種原因在Chrome,火狐和IE9,而不是默認爲HTML5播放器,因爲它後點擊它會像以前一個閃光燈播放器 - 爲什麼是這樣,有沒有辦法繞過它?它是否已經建立了DOM或者其他什麼東西?
感謝