2013-04-29 26 views
0

您好我已經想如果使用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或者其他什麼東西?

感謝

回答

0

OK我才弄明白爲什麼它的工作: 所以對於HTML5視頻更新IWAS做的方ID與.load而不是在視頻所以以下工作:

   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); 
       $(".scrPoster").load(); 

和閃光我使用的替代HTML:

var html = ' <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>'; 

       $("#objFlash").html(""); 
       $("#objFlash").append(html); 

視頻播放器的HTML如下:

<div class="divVideoWrapper"> 
    <div class="divVideo"> 
     <div class="divVideoContainer"> 
      <div id="videoPlayerChange" 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 id="objFlash" 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=http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4&poster=http://static.e-talemedia.net/content/images/frame3.png"></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> 
      </div> 
      <script> 
       $(function() { 
        $('.video_player').myPlayer(); 
       }); 
      </script> 
     </div> 
    </div> 
</div> 

我已經在ie8和9 Chrome和Firefox上測試過了,現在唯一沒有辦法的想法是即使ie9使用html5播放器 - 它似乎不能識別海報屬性。我希望這可以幫助別人。

相關問題