VideoJS

A basic example of VideoJS

by HYEONGJINKIM

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.11/video-js.css">
<script src="http://vjs.zencdn.net/4.11/video.js"></script>
<div id="videoWrap">
    <div class="video-js-box">
        <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
        <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
            <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
                    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
                        <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
                        <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                            <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                            <param name="allowfullscreen" value="true" />
                            <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
                            <!-- Image Fallback. Typically the same as the poster image. -->
                            <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
                        </object>
        </video>
    </div>
    <div class="controls">
        <button id="skip">Skip</button>
    </div>
</div>

JavaScript

$(function () {
    var welVideoWrap = $("#videoWrap");
    var welSkitBtn = $("#skip")
    var htVideo = {
        "controls": true,
            "autoplay": true,
            "preload": "auto"
    };
    var player = videojs('example_video_1', htVideo, function () {
        //Occurs Event When Video Finish
        this.on('ended', function () {
            welVideoWrap.hide();
        });
    });

    welSkitBtn.on('click', function () {
        //Pause Video
        player.pause();
        welVideoWrap.hide();
    });
});