@wee/video-helper

    0.2.1 • Public • Published

    Video Helper

    A JavaScript library to assist video playback in browsers

    Examples

    Detect video support

    var vh = new VideoHelper,
        video = false;
    
    if (vh.video) {
        if (vh.dash) {
          video = "video.mpd";
        } else if (vh.hls) {
          video = "video.m3u8";
        } else if (vh.h264) {
          video = "video.mp4";
        } else if (vh.vp9Webm) {
          video = "video-vp9.webm";
        } else if (vh.webm) {
          video = "video.webm";
        }
    }
    

    Determine video size based on screen size & pixel ratio

    <video id="player" src="480x270.mp4" controls>
      <a href="video.mp4">Download Video</a>
    </video>
    
    <script>
    var vh = new VideoHelper(),
        max = vh.maxScreen();
    
    if (max >= 1920) {
      document.getElementById("player").setAttribute("src", "1920x1080.mp4");
    } else if (max >= 1280) {
      document.getElementById("player").setAttribute("src", "1280x720.mp4");
    }
    </script>
    

    Detect autoplay support

    This is not 100% reliable. Autoplay might be supported, even if the test result is negative.

    <div id="autoplayer"></div>
    <script>
    var vh = new VideoHelper();
    
    vh.testAutoplay(function(result) {
        if (result) {
            document.getElementById('autoplayer').innerHTML = '<video autoplay loop muted>' +
                '<source src="video.m3u8" type="application/x-mpeg-url">' +
                '<source src="video.mp4" type="video/mp4">' +
                '<source src="video.webm" type="video/webm">' +
                '<\/video>';
        } else {
            document.getElementById('autoplayer').innerHTML = '<img src="screenshot.jpg" alt="">';
        }
    });
    </script>
    

    Determine viewport/iframe size

    The maxViewport function returns the largest dimension.

    var vh = new VideoHelper(),
        max = vh.maxViewport();
    

    Use custom buttons

    <video id="player" src="480x270.mp4" controls>
      <a href="480x270.mp4">Download Video</a>
    </video>
    <div id="buttons"></div>
    
    <script>
    var vh = new VideoHelper();
    
    // Remove native controls
    vh.hideControls(document.getElementById("player"));
    
    // Add buttons
    // see for example https://msdn.microsoft.com/en-us/library/hh924823%28v=vs.85%29.aspx
    </script>
    

    Support for old browsers

    <div id="player">
        <a href="video.mp4">Download Video</a>
    </div>
    
    <script>
    // Set video size (default: width = 640, height = 360)
    var vh = new VideoHelper({width: 480, height: 270}),
        video = false;
    
    // Use Windows Media Player for IE8
    if (vh.mp4Wmp) {
        video = "video.mp4";
    } else if (vh.wmvWmp) {
        video = "video.wmv";
    }
    if (video) {
        vh.wmPlayer({id: "player", file: video});
    }
    
    // Use QuickTime Player
    if (vh.mp4Quicktime) {
        video = "video.mp4";
    } else if (vh.quicktime) {
        video = "video.mov";
    }
    if (video) {
        vh.quicktimePlayer({id: "player", file: video});
    }
    </script>
    

    License

    MIT

    Author

    Walter Ebert

    Keywords

    none

    Install

    npm i @wee/video-helper

    DownloadsWeekly Downloads

    0

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    4

    Last publish

    Collaborators

    • wee