如何將數學隨機數組輸出爲HTML

我只是試圖處理我的javascript技巧，並且試圖製作一個頁面，它將從數組中隨機加載HTML5視頻。如何將數學隨機數組輸出爲HTML

一旦加載視頻，我試圖設置它，所以一旦視頻被點擊，它將觸發函數從數組中隨機化一個新視頻並將結果輸出到HTML視頻代碼中。

所以每次用戶點擊視頻都會隨機化並開始在頁面上播放。

我相信我與我迄今爲止編寫的代碼非常接近，但似乎無法在每次點擊後點擊它來隨機化。

這裏是我的代碼

HTML

<a href="#" class="click"> 
      <section> 
       <div> 
        <video loop autoplay> 
         <source src="videos/1.mpg" type="video/ogg"> 
         <source src="videos/1.webm" type="video/mp4"> 
         Your browser does not support the <code>video</code> element. 
        </video> 
       </div> 
     </section> 
</a>

的JavaScript

// Loads in Notifier 
$(document).ready(function(){ 
    swal({ title: "Tap or Swipe to randomize", 
       confirmButtonColor: "#FF1D23", 
       confirmButtonText: "Cool!", 
       imageUrl: "images/thumbs-up.jpg", 
       timer: 4000 
      }); 
}); 

//Array of Videos 
var videos = [ 
    [{type:'mp4', 'src':'videos/1.mp4'}, {type:'webm', 'src':'videos/1.webm'}], 
    [{type:'mp4', 'src':'videos/2.mp4'}, {type:'webm', 'src':'videos/2.webm'}], 
]; 

//onClick + Action 
$(function() { 
    $('a.click').click(function(e) { 
     e.preventDefault(); 
     var randomIndex = parseInt(Math.random()*videos.length); 
     $(this).find('videos').append('<source src="'+videos[randomIndex]+'" />');  
    }); 
}); 


function getRandomVideo() { 
var number = Math.floor(Math.random()*video.length); 
document.write('<source src="'+videos[number]+'" />'); 
} 

$(function() { 
    $('a.click').click(function(e) { 
     e.preventDefault(); 
     console.log("hello world"); 
     var number = Math.floor(Math.random()*videos.length); 
     $(this).html('<source src="'+videos[number]+'" />'); 
    }); 
});

來源

2015-01-09 h0bb5

見this fiddle

//onClick + Action 
$('a.click').click(function(e) { 
    e.preventDefault(); 
    var randomIndex = parseInt(Math.random()*videos.length); 
    $(e.currentTarget).find('video').html('<source src="'+videos[randomIndex][0].src+'" type="video/ogg" /><source src="'+videos[randomIndex][1].src+'" type="video/mp4" />'); 
});

我獨自離開你的數據結構，雖然它可以構造得更好。

幾個問題。首先，你沒有正確創建你的HTML字符串。你必須使用videos[randomIndex][0].src（注意src）。其次，當你應該是.html()時，你是.append()。最後，你.find('videos')而不是.find('video')。標籤是一個視頻（沒有S）。

編輯： 此外，在這種情況下，你不能做$(this).find(...)。 this是指點擊事件，而不是a標記。您需要獲得事件$(e.currentTarget).find('video')的TARGET，而不是事件。

來源

2015-01-09 22:44:36

哇，我想我有很長的路要走ŧ o繼續學習哈哈。我想弄清楚你提供的代碼。 – h0bb5 2015-01-10 00:15:08

我已經添加了你寫的代碼，當我加載視頻加載頁面時，點擊視頻消失，沒有其他東西被放入。我檢查了控制檯中的任何錯誤，並沒有收到任何一個。另外，我怎樣才能讓頁面隨機加載onload呢？ – h0bb5 2015-01-10 00:16:27

videos[number][0].src爲.MP4格式和 videos[number][1].src爲.webm格式

，並確保正確的對象聲明：

{類型： 'MP4'， 'SRC'：「視頻/ 2 .MP4' }

應該{type:'mp4', src:'videos/2.mp4'}

來源

2015-01-09 22:53:26 hip3r

如何將數學隨機數組輸出爲HTML

回答

相關問題