Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    trouble getting vids on website to play properly in chrome

    I have been puzzling over how to fix this anomaly in my webpage for months.
    the idea is that you pick a thumbnail, then the 'play video' button, and it plays a video.
    it works fine in FF, and IE10.
    But in Chrome (the latest), it doesn't display the video unless you move the mouse to the edge of the large image, then it displays. it is the same with both thumbs. i know it is actually playing, because if i hit 'pause', it displays a still frame part way thru the clip.
    however, once each of the clips has played, from then on each successive time you hit 'play video', it plays perfectly.

    the base of the page is Trent Foley's Galleria, and i have left it alone and just added my stuff over it. a word about the gallery. it is free, and Trent only asks that he be notified when it is included on a webpage, and be given credit. i have done both.

    i have noticed that i don't have the problem when i am using the Notepad++ chrome emulator, just when i am actually at the website and using chrome.

    i don't know if listing the website address is frowned on, but that is where the problem is, so i include it. below is the html and most of the javascript.

    DragonArtStore.com/april :

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset='utf-8'>
    <title>Dragon Staffs</title>
    <link rel="stylesheet" href="galleriffic-2.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery.gallerifficMOD.js"></script>
    <script type="text/javascript" src="jquery.opacityrollover.js"></script>

    </head>
    <body>
    <div id="page">
    <div id="container" style="border:0px solid blue; height:100%;">
    <!-- Start Advanced Gallery Html Containers -->
    <div id="gallery" class="content" style="border:0px solid yellow; width:510px;height:510px; position:absolute;margin-top:45px;margin-left:480px;">
    <div id="controls" class="controls"></div>
    <div class="slideshow-container">
    <div id="loading" class="loader"></div>
    <div id="slideshow" class="slideshow"></div>
    </div>
    <div id="caption" class="caption-container"></div>
    </div>
    <div id="thumbs" class="navigation">
    <ul class="thumbs noscript">

    <li> <!-- FIRST THUMBNAIL -->
    <a class="thumb" href="images/dragon-art-store/dragon-staffs/slides/baldy-staff.jpg" title="">
    <img src="images/dragon-art-store/dragon-staffs/thumbs/t-baldy-staff.jpg" alt="Title #1" onclick="closeVideo1(),showVidButtons()">
    </a>
    <div class="caption">
    <div class="button"><script>v1='staff-1.ogv'; v2='staff-1.mp4';</script></div>
    </div>
    </li> <!-- END OF FIRST THUMBNAIL -->

    <li> <!-- Second THUMBNAIL -->
    <a class="thumb" href="images/dragon-art-store/dragon-staffs/slides/baldy-staff.jpg" title="">
    <img src="images/dragon-art-store/dragon-staffs/thumbs/t-baldy-staff.jpg" alt="Title #1" onClick="closeVideo1(),showVidButtons()">
    </a>
    <div class="caption">
    <div class="button"><script>v1='headogv.ogv';v2='headmp4.mp4';</script></div>
    </div>
    </li> <!-- END OF Second THUMBNAIL -->

    </ul>
    </div>
    <div id="vid-controls" style="border: 0px solid blue; width:150px;height:85px; position:absolute;margin-top:575px;margin-left:849px;">

    <div id="vidbox1" style="width:480px; height:480px; position:absolute;top:-505px;left:-346px;margin:0px;padding:0px;">
    <video id="vid1" width="480" height="480" autoplay poster='trans480.png'>
    <source src="mp4" type="video/mp4">
    </video>
    </div>

    <div id="vidbox2" style="width:480px; height:480px; position:absolute;top:-505px;left:-346px;margin:0px;padding:0px;">
    <video id="vid2" width="480" height="480" autoplay poster='trans480.png'>
    <source src="ogv" type="video/ogg">
    </video>
    </div>

    <div><button onclick="playVideo1()" style="width:100px; line-height:1.1; border-radius:7px; background-color:#ffccff; position:absolute; top:-40px; left:-257px; font-size: 11pt;">Play Video</button>
    <div><button onclick="pauseVideo1()" style=" line-height:1.1; border-radius:7px; background-color:#ffccff; position:absolute; top:-39px; left:-142px;font-size: 10pt;">Pause</button>
    </div> </div>
    </div>
    </div>
    </div>
    <script>
    function playVideo1()
    {
    document.getElementsByTagName('video')[0].src=v1;
    $('#vidbox1').show('slow');
    document.getElementsByTagName('video')[1].src=v2;
    $('#vidbox2').show('slow');
    $("video").bind("ended", function() {
    $('#vidbox1').hide('slow', function() {
    $('#vidbox2').hide('slow', function() {
    }); }); });
    }
    function pauseVideo1()
    {
    document.getElementById('vid1').pause();
    document.getElementById('vid2').pause();
    }
    function resumeVideo1()
    {
    document.getElementById('vid1').play();
    document.getElementById('vid2').play();
    }
    function closeVideo1()
    {
    close=document.getElementById('vid1').pause();
    $('#vidbox1').hide('slow');var close = document.getElementById('vid1');
    close=document.getElementById('vid2').pause();
    $('#vidbox2').hide('slow');var close = document.getElementById('vid2');
    /* $('#vid-controls').hide(); */
    }
    function hideVidButtons()
    {
    $('#vid-controls').hide('slow');
    }
    function showVidButtons()
    {
    $('#vid-controls').show('slow');
    }
    /* <div id="footer">&copy; 2009 Trent Foley</div> */
    jQuery(document).ready(function($) {
    // We only want these styles applied when javascript is enabled
    $('div.navigation').css({'width' : '300px', 'float' : 'left'});
    $('div.content').css('display', 'block');
    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 1.0;
    $('#thumbs ul.thumbs li').opacityrollover({
    mouseOutOpacity: onMouseOutOpacity,
    mouseOverOpacity: 0.67,
    fadeSpeed: 'fast',
    exemptionSelector: '.selected'
    });
    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
    delay: 2500,
    numThumbs: 12,
    preloadAhead: 10,
    enableTopPager: true,
    enableBottomPager: false,
    maxPagesToShow: 7,
    imageContainerSel: '#slideshow',
    controlsContainerSel: '#controls',
    captionContainerSel: '#caption',
    loadingContainerSel: '#loading',
    renderSSControls: true,
    renderNavControls: true,
    playLinkText: '',
    pauseLinkText: '',
    prevLinkText: '',
    nextLinkText: '',
    nextPageLinkText: '',
    prevPageLinkText: '',
    enableHistory: false,
    autoStart: false,
    syncTransitions: true,
    defaultTransitionDuration: 900,
    onSlideChange: function(prevIndex, nextIndex) {
    // 'this' refers to the gallery, which is an extension of $('#thumbs')
    this.find('ul.thumbs').children()
    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    .eq(nextIndex).fadeTo('fast', 1.0);
    },
    onPageTransitionOut: function(callback) {
    this.fadeTo('fast', 0.0, callback);
    },
    onPageTransitionIn: function() {
    this.fadeTo('fast', 1.0);
    }
    });
    });
    </script>
    </body>
    </html>


    I have tried what seems to be a thousand permutations and trial and error changes and it remains not fixed. i would certainly appreciate it if someone would enlighten me.

    thanks

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Looks like you have some WeIrD Javascript/jQuery mixing going on in there for starters.
    Code:
    $("video").bind("ended", function() {
    $('#vidbox1').hide('slow', function() {
    $('#vidbox2').hide('slow', function() {
    });	});	});
    How bout:
    Code:
    $("video").bind("ended", function() {
    $('#vidbox1').hide('slow')
    $('#vidbox2').hide('slow')
    });
    You should first try and simplify you code to just jQuery since you have it linked on your site. document.getElementById('vid1') and $("#vid1") are the same thing.
    Try refactoring a little first.

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i think i found the solution. it had nothing to do with "WeIrD" coding.
    i will give it a full test, and if it holds up, i'll post what i did.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •