Autor | Zpráva | ||
---|---|---|---|
Kaminko Profil |
#1 · Zasláno: 5. 5. 2013, 05:11:49
Zdravím, mám problém. Vytvoril som si podľa tutorialu HTML5 prehrávač s Jquery a ovládacími prvkami, no nefunguje to.
Tu je celý kód : <style> .ghinda-video-player { float: left; padding: 10px; border: 5px solid #61625d; -moz-border-radius: 5px; /* FF1+ */ -ms-border-radius: 5px; /* IE future proofing */ -webkit-border-radius: 5px; /* Saf3+, Chrome */ border-radius: 5px; /* Opera 10.5, IE 9 */ background: #000000; background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */ box-shadow: inset 0 15px 35px #535353; } .ghinda-video-play { display: block; width: 22px; height: 22px; margin-right: 15px; background: url(../images/play-icon.png) no-repeat; opacity: 0.7; -moz-transition: all 0.2s ease-in-out; /* Firefox */ -ms-transition: all 0.2s ease-in-out; /* IE future proofing */ -o-transition: all 0.2s ease-in-out; /* Opera */ -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */ transition: all 0.2s ease-in-out; } .ghinda-paused-button { background: url(../images/pause-icon.png) no-repeat; } .ghinda-video-play:hover { opacity: 1; } .ghinda-video-seek .ui-slider-handle { width: 15px; height: 15px; border: 1px solid #333; top: -4px; -moz-border-radius:10px; -ms-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background: #e6e6e6; background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5)); box-shadow: inset 0 -3px 3px #d5d5d5; } .ghinda-video-seek .ui-slider-handle.ui-state-hover { background: #fff; } .ghinda-video-seek .ui-slider-range { -moz-border-radius:15px; -ms-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; background: #4cbae8; background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce)); box-shadow: inset 0 -3px 3px #39a2ce; } .ghinda-volume-box { height: 30px; -moz-transition: all 0.1s ease-in-out; /* Firefox */ -ms-transition: all 0.1s ease-in-out; /* IE future proofing */ -o-transition: all 0.2s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1s ease-in-out; } .ghinda-volume-box:hover { height: 135px; padding-top: 5px; } .ghinda-volume-slider { visibility: hidden; opacity: 0; -moz-transition: all 0.1s ease-in-out; /* Firefox */ -ms-transition: all 0.1s ease-in-out; /* IE future proofing */ -o-transition: all 0.1s ease-in-out; /* Opera */ -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */ transition: all 0.1s ease-in-out; } .ghinda-volume-box:hover .ghinda-volume-slider { position: relative; visibility: visible; opacity: 1; } </style> <video width="600px" height="300px" controls> <source src="http://www.youtube.com/watch?v=2hoPD89eSmA" type="video/mp4"> <div class="ghinda-video-controls"> <a class="ghinda-video-play" title="Play/Pause"></a> <div class="ghinda-video-seek"></div> <div class="ghinda-video-timer">00:00</div> <div class="ghinda-volume-box"> <div class="ghinda-volume-slider"></div> <a class="ghinda-volume-button" title="Mute/Unmute"></a> </div> </div> </video> <script src="/jquery.js" type="text/javascript"> <script type="text/javascript"> $.fn.gVideo = function(options) { // build main options before element iteration var defaults = { theme: 'simpledark', childtheme: '' }; var options = $.extend(defaults, options); // iterate and reformat each matched element return this.each(function() { var $gVideo = $(this); //create html structure //main wrapper var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme); //controls wraper var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>'); $gVideo.wrap($video_wrap); $gVideo.after($video_controls); //get newly created elements var $video_container = $gVideo.parent('.ghinda-video-player'); var $video_controls = $('.ghinda-video-controls', $video_container); var $ghinda_play_btn = $('.ghinda-video-play', $video_container); var $ghinda_video_seek = $('.ghinda-video-seek', $video_container); var $ghinda_video_timer = $('.ghinda-video-timer', $video_container); var $ghinda_volume = $('.ghinda-volume-slider', $video_container); var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container); $video_controls.hide(); // keep the controls hidden var gPlay = function() { if($gVideo.attr('paused') == false) { $gVideo[0].pause(); } else { $gVideo[0].play(); } }; $ghinda_play_btn.click(gPlay); $gVideo.click(gPlay); $gVideo.bind('play', function() { $ghinda_play_btn.addClass('ghinda-paused-button'); }); $gVideo.bind('pause', function() { $ghinda_play_btn.removeClass('ghinda-paused-button'); }); $gVideo.bind('ended', function() { $ghinda_play_btn.removeClass('ghinda-paused-button'); }); var createSeek = function() { if($gVideo.attr('readyState')) { var video_duration = $gVideo.attr('duration'); $ghinda_video_seek.slider({ value: 0, step: 0.01, orientation: "horizontal", range: "min", max: video_duration, animate: true, slide: function(){ seeksliding = true; }, stop:function(e,ui){ seeksliding = false; $gVideo.attr("currentTime",ui.value); } }); var gTimeFormat=function(seconds){ var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60); var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60)); return m+":"+s; }; var seekUpdate = function() { var currenttime = $gVideo.attr('currentTime'); if(!seeksliding) $ghinda_video_seek.slider('value', currenttime); $ghinda_video_timer.text(gTimeFormat(currenttime)); }; $gVideo.bind('timeupdate', seekUpdate); $ghinda_volume.slider({ value: 1, orientation: "vertical", range: "min", max: 1, step: 0.05, animate: true, slide:function(e,ui){ $gVideo.attr('muted',false); video_volume = ui.value; $gVideo.attr('volume',ui.value); } }); var muteVolume = function() { if($gVideo.attr('muted')==true) { $gVideo.attr('muted', false); $ghinda_volume.slider('value', video_volume); $ghinda_volume_btn.removeClass('ghinda-volume-mute'); } else { $gVideo.attr('muted', true); $ghinda_volume.slider('value', '0'); $ghinda_volume_btn.addClass('ghinda-volume-mute'); }; }; $ghinda_volume_btn.click(muteVolume); $gVideo.removeAttr('controls'); $('video').gVideo(); </script> |
||
Kaminko Profil |
#2 · Zasláno: 5. 5. 2013, 11:46:29
a este jedna otazka. Da sa v html5 prehravaci prehrat format flv ?
|
||
Bubák Profil |
#3 · Zasláno: 5. 5. 2013, 12:06:40
Kaminko:
„Da sa v html5 prehravaci prehrat format flv ?“ Ne, podrobnosti ohledně podporovaných kodeků v přehledné tabulce na www.quirksmode.org/html5/tests/video.html |
||
Kaminko Profil |
#4 · Zasláno: 5. 5. 2013, 21:03:09
Aha, dakujem. A nevie niekto kde je chyba v kode ? Bude to pravdepodobne v js.
|
||
Časová prodleva: 11 let
|
0