VideoJS

Playing stream video is a very popular task in nowadays in companies with wide network. Stream video is supported well with modern browsers, but there are some difficulties with streaming inside networks without direct Internet access and SharePoint 2010 as a portal solution. Of course, SharePoint 2010 is very good, but it is unlikely to become better. But in the current moment I have to work with what I have.

The requirement for choosing the solution for embedding video is the compatibility with Internet explorer 9 or higher and the availability to work with offline mode.

In the result of my researches my choice is a player framework VideoJs (videojs.com). One other solution which fitted my requirements wat FlashPhoner, but I couldn't make a good-looking solution with it. That's why VideoJS became the main platform for the work.

By default, VideoJS works only with HTML5 features. And it doesn't allow to play RTMP video. But there are many different plugins (https://videojs.com/plugins/) for VideoJS, which you can easily add to your solution. For my solution it was enough for me to use only plugin "videojs-flash", but I decided to add a bit of corporative style and to add logo of our company to player controls. And I also added "videojs-brand".

To collect the modules for solution, I prefer to use NPM:

npm install video.js

npm install videojs-flash

npm install videojs-brand

 

Of course, not all of the directories are necessary, some of them are for modifications, tests and I don't even know what else.

<link href="//path_to/video-js.css" rel="stylesheet">
<script type="text/javascript" src="//path_to/video.min.js"></script>
<script type="text/javascript" src="//path_to/videojs-brand.min.js"></script>
<script type="text/javascript" src="//path_to/videojs-http-streaming.min.js"></script>
<script type="text/javascript" src="//path_to/videojs-flash.min.js"></script>
<script>videojs.options.flash.swf = "//path_to/video-js.swf";</script>


    <div style="width:640;height:350;overflow-x:hidden;overflow-y:hidden;">
        <video id="videojs-flash-player" class="video-js vjs-default-skin vjs-big-play-centered "
               controls preload="auto" width="640" height="350"
               data-setup='{"techorder" : ["flash","html5], "fluid": true }' >
            <source src="rtmp://path_to_RTMP_stream" type='video/mp4a' />
Your browser doesn't support HTML5. You can read about which browsers which <a href="http://videojs.com/html5-video-support/" target="_blank">support HTML5 video</a>
        </video>
    </div>


<!-- In the bottom of the page before closing <body> tag put this text: -->
    <script>
        var player = videojs('videojs-flash-player', {
            techOrder: ['flash']
        });

        player.brand({
            image: "https://servername/_layouts/styles/images/logo.gif",
            title: "Company",
            destination: "https://servername/",
            destinationTarget: "_top"
        });
        player.play();
    </script>