CODEWITHSUNDEEP
html5-video
jdog
jdog

Reputation: 2539

mediaelementjs as a flexible flash player

I have a library of flash videos that are played with a fixed size Flash player. I would like to use mediaelementjs to have at least a player where I can choose the size - with the view of adding responsive size and mobile playing options as later stages.

I've minimised the example on the website to this, however it doesn't play the example files at all.

<html>
    <head>
        <code>
            <script src="mediaelementjs/jquery.js"></script>
            <script src="mediaelementjs/mediaelement-and-player.min.js"></script>
            <link rel="stylesheet" href="mediaelementjs/mediaelementplayer.css" />
        </code>
    </head>
    <body>

        <div class="myvids" id="viddivap1" width="50%" style="width:100%;position:relative;">
        <video width="320" height="240" controls="controls" preload="none" style="max-width:100%;height:100%;">
            <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
            <object width="320" height="240" type="application/x-shockwave-flash" data="mediaelementjs/flashmediaelement.swf">
                <param name="movie" value="mediaelementjs/flashmediaelement.swf" />
                <param name="flashvars" value="controls=true&file=echo-hereweare.mp4" />
                <!-- Image as a last resort -->
                <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
            </object>
        </video>
        </div>

    </body>

</html>

Upvotes: 0

Views: 323

Answers (1)

user1419445
user1419445

Reputation:

Your example is missing the "source" tag:

<html>
    <head>
        <code>
            <script src="mediaelementjs/jquery.js"></script>
            <script src="mediaelementjs/mediaelement-and-player.min.js"></script>
            <link rel="stylesheet" href="mediaelementjs/mediaelementplayer.css" />
        </code>
    </head>
    <body>
        <div class="myvids" id="viddivap1" width="50%" style="width:100%;position:relative;">
        <video width="320" height="240" controls="controls" preload="none" style="max-width:100%;height:100%;">
            <source type="video/mp4" src="echo-hereweare.mp4" />
            <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
            <object width="320" height="240" type="application/x-shockwave-flash" data="mediaelementjs/flashmediaelement.swf">
                <param name="movie" value="mediaelementjs/flashmediaelement.swf" />
                <param name="flashvars" value="controls=true&file=echo-hereweare.mp4" />
                <!-- Image as a last resort -->
                <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
            </object>
        </video>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions