點擊切換視頻

我想點擊一個按鈕來換出另一個視頻，這是一個autoplaying和循環。點擊切換視頻

真的很難找到縫合線，任何幫助都很棒！

繼承人我的代碼，

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Live Fire</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <button>Clicky</button> 
     <br> 
     <video id="container" width="600" height="400" src="video/1.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video> 

    </div><!-- /content --> 

    <div data-role="footer" data-position="fixed" class="ui-bar"> 
    <a href="#" data-icon="plus">Add</a> 

</div> 
</div><!-- /page --> 
<script> 
    $('button').on('click', function() { 
    var $el = $(this).data('toggle') ? '<video id="container" width="600" height="400" src="video/1.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video>' : '<video id="container" width="600" height="400" src="video/3.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video>'; 
    $(this).data('toggle', !$(this).data('toggle')); 
    $('#container').html($el); 
}); 
    </script> 
</body>

來源

2013-08-20 Nathaniel Harman

您的視頻htmlstring不裹引號...這必須是拋出一個明顯的JavaScript錯誤。 –

o耶哎呀，只是更新它，我仍然在學習jquery :( –

這仍然無法正常工作，你內在的報價正在打破你的外語引用 –

toggle()不再起作用像你想的jQuery 1.9，它已被替換爲動畫方法之後它。

這裏有一種方法，你可以使用jQuery 1.9.1做到這一點：

$('button').on('click', function() { 
    var $el = $(this).data('toggle') ? VIDEO_1 : VIDEO_2; 
    $(this).data('toggle', !$(this).data('toggle')); 
    $('#container').html($el); 
});

FIDDLE

來源

2013-08-20 21:35:42

嘿尼爾S，這是偉大的！謝謝你分配你已經保存我的培根！我試圖讓它與本地視頻一起工作，但它沒有接縫切換，繼承我的代碼， –

如果您要使用html5視頻元素，您可能希望將容器元素設爲空白視頻元素，然後讓jquery在容器中插入源元素。使用我上面的代碼，如果#container是對視頻元素的引用，如，而VIDEO_1將類似於 –

我已更新代碼，視頻播放和循環，但按鈕現在不做任何操作:( –

點擊切換視頻

回答

相關問題