Video won't play on site, but it plays within Cascade

webadmin's Avatar

webadmin

18 Sep, 2015 08:42 PM

I've got a video I'm trying to play on the site. When you look at it in the block that contains it, it plays just fine. But when I publish it (or look at the page that the block goes into), it just shows a black screen. Here's the block of code I'm attempting to use:

<div class="video-holder">
    <div class="video">
        <video id="video1" width="1520" height="678" controls="controls" poster="" preload="none">
            <source src="http://www.nobts.edu/video1.mp4" type="video/mp4" />
            <source src="http://www.nobts.edu/video1.webm" type="video/webm" />
            <source src="http://www.nobts.edu/video1.ogv" type="video/ogg" /> 
            <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
            <!--#protect
            <object width="1520" height="678" type="application/x-shockwave-flash" data="swf/flashmediaelement.swf">
                <param name="movie" value="js/flashmediaelement.swf" />
                <img src="images/img1.jpg" width="1520" height="678" title="No video playback capabilities" />
            </object>
            #protect-->
        </video>
        <!-- <div class="logo-box">
            <a href="#">
                <img alt="" height="289" src="/render/file.act?path=/_skin/images/main-logo.png" width="394" />
            </a>
        </div> -->
        <!--<img src="/render/file.act?path=/_skin/images/img1.jpg" title="No video playback capabilities" />-->
    </div>
</div>

I've commented out the two pictures that work as fallbacks, because if you don't, you just get the picture. Why would the video not play?

  1. Support Staff 1 Posted by Tim on 23 Sep, 2015 04:35 PM

    Tim's Avatar

    Hi,

    Is there a live sample of this page somewhere on your site that I can take a look at? If so, can you send me the URL?

    Also, can you include a screen shot of the entire browser interface (including the URL bar) when you view this Page in Cascade? Be sure to mark out the domain name of your instance prior to attaching the screen shot. Otherwise, feel free to make this post private before attaching.

    Thanks!

  2. 2 Posted by webadmin on 23 Sep, 2015 04:51 PM

    webadmin's Avatar

    Sorry about that... I meant to give you the page address, and apparently forgot it. Here's the live page: http://www.nobts.edu/DefaultTest.html

    I'm attaching the screenshots. Screenshot1.jpg is looking at the block that contains the video, and that appears to work. Screetshot2.jpg is looking at the page the block fits into.

  3. Support Staff 3 Posted by Tim on 23 Sep, 2015 05:50 PM

    Tim's Avatar

    Thanks for including that information. I investigated a bit and it seems like perhaps some CSS for the player is interfering with the page CSS? I noticed that if I remove this line from the source code of your page:

    <link href="_skin/css/mediaelement/mediaelementplayer.css" media="all" rel="stylesheet">
    
    the video will play (albeit without controls due to all of the styling missing).

    This also explains why the video loads when you are viewing the Block itself within Cascade - that is because this CSS file isn't being applied to it at that point.

    So, I would recommend taking a look at how this particular CSS file is interacting with the page layout to see if there might be some interference there.

    Let me know if you're able to track anything down.

  4. Tim closed this discussion on 20 Oct, 2015 02:57 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac