Monday 7 July 2014

Turning MP4 videos into something suitable for rubbish PCs on SharePoint

So the problem is you have a bunch of video recordings made with a tool such as Snaggit (http://www.techsmith.com/snagit.html) which are encoded in MP4 / H264.
Unfortunately they are just not small enough for our crappy SharePoint and some PCs don't have the tools to play them.

The solution - re-encode at a lower bitrate and convert them to flash video so they can be played inside an online player.


Snaggit default encodes at 512Kbps, drop this to 256Kbps for approximately half the file size and the quality still being good enough to see all the detail.

ffmpeg -i recording.mp4 -b:v 256K small-recording.mp4

Now put it in a flash video container.

ffmpeg -i small-recording.mp4 -c copy small-recording.flv

Flowplayer Flash is a good free online player. Extract the player into a subdirectory on your sharepoint site.

Create an html page to display it with your video. Here's the most basic one:
The lines in red are the ones to configure. Make sure you set the display size to match (or be half, quarter size etc) of the video to avoid black bars around the content.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- A minimal Flowplayer setup to get you started -->
  

    <!-- 
        include flowplayer JavaScript file that does  
        Flash embedding and provides the Flowplayer API.
    -->
    <script type="text/javascript" src="player/flowplayer-3.2.6.min.js"></script>
   
    <!-- some minimal styling, can be removed -->
    <link rel="stylesheet" type="text/css" href="player/style.css">
   
    <!-- page title -->
    <title>ULS Training</title>

</head><body>

    <div id="page">
       
        <h1>A title for your video</h1>
   
        <p>A descriptive line of text about your video.</p>
       
        <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
        <a  
             href="http://sharepoint/small-recording.flv"
             style="display:block;width:640px;height:385px"
  
             id="player"> 
        </a> 
   
        <!-- this will install flowplayer inside previous A- tag. -->
        <script>
            flowplayer("player", "player/flowplayer-3.2.7.swf", {
                clip:  {
                    autoPlay: false,
                    autoBuffering: true,
                scaling: 'fit'
                }
            });

        </script>