i'm trying figure out if code making page load forever or if iterating continuously through javascript object. have object 46 entries of 46 images, act modal triggers, should loaded automatically once page loads. page loading half of images , isn't loading rest. file size of images minimal, @ 97kb. videos linked in object go 9mb, i'm under assumption aren't being loaded until click event fired. correct? should using ajax load video content? or javascript code culprit? i'm trying learn as possible, ideas/advice welcomed , appreciated!
javascript
var datacollection = { 'videodata': [ { 'id' : 0, 'title' : 'badminton', 'company' : 'pepto bismol', 'giflink' : 'http://reneinla.com/kris/gifs/badmintonpeptobismolcommercial.gif', 'srcmp4' : 'http://reneinla.com/kris/videos/badmintonpeptobismolcommercial.mp4', 'srcwebm' : 'http://reneinla.com/kris/videos/badmintonpeptobismolcommercial.webm', 'srcogv' : 'http://reneinla.com/kris/videos/badmintonpeptobismolcommercial.ogv', 'poster' : 'http://reneinla.com/kris/videos/badmintonpeptobismolcommercial.jpg' }, { ... ] }; var videos = $('#video'); var modalcontent = $('#video-modal'); var appendvideo = function(videoobj) { var poster = videoobj.poster; var srcmp4 = videoobj.srcmp4; var srcwebm = videoobj.srcwebm; var srcogv = videoobj.srcogv; var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoobj.title + '" data-toggle="modal" data-target="#mymodal"/></div>'); var videoplayer = $('<video preload="auto" controls><source src="' + srcmp4 + '" type="video/mp4;"><source src="' + srcwebm + '" type="video/webm;"><source src="' + srcogv + '" type="video/ogv;"></video>'); videos.append(video); video.find('img').click(function(e) { modalcontent.append(videoplayer); // debug // alert(videoobj.srcmp4); // console.log(videoobj.srcmp4); }); $('#mymodal, .close').on('click', function(){ modalcontent.find('video').remove(); }); $('.myhtmlvideo').click(function() { $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); }); }; (var = 0; < datacollection.videodata.length; i++) { var obj = datacollection.videodata[i]; appendvideo(obj); } html
<div class="container row"> <div id="video"></div> </div> <div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="modal-body" id="video-modal"></div> </div> </div> </div>
try
var videoplayer = $('<video preload="none" controls><source src="' + srcmp4 + '" type="video/mp4;"><source src="' + srcwebm + '" type="video/webm;"><source src="' + srcogv + '" type="video/ogv;"></video>'); 
Comments
Post a Comment