Add VideoJS to HTML5 audio/video with VideoJS

Dolphin currently uses the browser's default HTML5 audio/video interface. I don't like that, so I've opted to use VideoJS to create a unified look across all devices and browsers. I wrote about this in a thread a while back, but I'll make a tutorial here.

First: Demo

You can see the new player in action here:

• Video: http://www.trydolphin.net/m/videos/view/sintel-trailer-1080p
• Audio: http://www.trydolphin.net/m/sounds/view/07-I-m-Henry-the-VIII-I-Am

Instructions 

Edit /boonex/modules/html5av/classes/BxH5avModule.php and ...

1. Look for (around line 89):

$sOverride = '
    <video controls preload="auto" autobuffer ' . $sAutoPlay . $sPoster . ' style="width:100%; height:' . getSettingValue('video', 'player_height') . 'px;" id="' . $sId . '">
        ' . $sSourceWebm . '
        <source src="' . BX_DOL_URL_ROOT . "flash/modules/video/get_file.php?id=" . $iFileId . "&ext=m4v&token=" . $sToken . '" />

Replace the whole bit with this:

$sOverride = '
    <link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.12/video.js"></script>

    <video class="video-js vjs-default-skin vjs-big-play-centered" data-setup=\'{}\' width="100%" height="' . getSettingValue('video', 'player_height') . 'px" controls preload="auto" autobuffer ' . $sAutoPlay . $sPoster . ' id="' . $sId . '">
        ' . $sSourceWebm . '
        <source type=\'video/mp4\' src="' . BX_DOL_URL_ROOT . "flash/modules/video/get_file.php?id=" . $iFileId . "&ext=m4v&token=" . $sToken . '" />

2. Look for (around line 230):

$sOverride = '
    <audio controls ' . $sAutoPlay . ' preload="auto" autobuffer style="width:100%" id="' . $sId . '">

Replace the whole bit with this:

$sOverride = '
    <link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.12/video.js"></script>

    <audio class="video-js vjs-default-skin vjs-big-play-centered" data-setup=\'{}\' width="100%" controls ' . $sAutoPlay . ' preload="auto" autobuffer style="width:100%" id="' . $sId . '">

3. Look for (around line 344):

$sOverride = '
    <video controls preload="auto" autobuffer id="' . $sId . '">
        ' . $sSourceWebm . '
        <source src="' . BX_DOL_URL_ROOT . "flash/modules/video_comments/get_file.php?id=" . $iFileId . "&ext=m4v&token=" . $sToken . '" />

Replace the whole bit with this:

$sOverride = '
    <link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.12/video.js"></script>

    <video class="video-js vjs-default-skin vjs-big-play-centered" data-setup=\'{}\' width="100%" controls preload="auto" autobuffer id="' . $sId . '">
        ' . $sSourceWebm . '
        <source type=\'video/mp4\' src="' . BX_DOL_URL_ROOT . "flash/modules/video_comments/get_file.php?id=" . $iFileId . "&ext=m4v&token=" . $sToken . '" />

That's it. Clear all cache and take a look.

Thank you!!

Vid player is nice, prob have a play with that!

Still no play sign in thumbnail :/

Hmmm. I have been using the VideoJS player in my tutorials section for quite some time now. I have seen no problems with chrome, even on the latest version i just tested a few minutes ago. I have not put in any fixes from AlexT either. Stock dolphin. Sample here. http://www.deanbassett.com/m/videos/view/Soul-Eater-Clip-1

I also use the VideoJS player on my personal Video Directory module and have not had any issues with chrome. http://www.deanbassett.com/m/video_directory/view/524/

VideoJS is great. Nice player.

I ran into some issues with the default source URLs on Safari, but it may have been another tweak I did to resolve it. You do need to specify the type='video/mp4' for the m4v video to work in some cases. I'll check.

Edit: Indeed, it wasn't needed after all. Just need to specify the type. I've removed those bits.

I can not see the code!

It seems somebody (I won't name names) broke the forums. I'll correct the post in a bit, but I should have that old text file somewhere to download...

Ah, here it is.

Thanks so much Nathan.

Tried a couple of times to edit  BxH5avModule, so I think I've done it right but getting:

Parse error: syntax error, unexpected 'href' (T_STRING) in /home/psmmnet/public_html/modules/boonex/html5av/classes/BxH5avModule.php on line 93

I think that's this line that includes the text: vjs.zencdn.net/4.12/video-js.css

I'm burning the midnight oil here so your help is especially appreicated.

Thanks, Nathan!

This works great!

I noticed that the video file had a "Download" button among the action column, but the audio doesn't. Is this not achievable with audio as well, cos' i would love for member files to be downloadable by guests.

The audio happens to be the most uploaded member files in most music communities. I would love this configuration for my website if the audio enjoys the same privilege of the "DOWNLOAD" option.

Post that line from the file. These are the same code edits I've made, so they should work. Make sure to copy and paste the changes, rather than trying to apply them by hand.

Questions unrelated to the player are best asked in their own threads. That said, downloads are disabled for the sounds module by default. You can enable it from Admin Panel => Modules => Flash Apps => Music Player => Settings. Tick the box "Enable files saving" and save. The button should then be in the Actions block.

 Thanks very much sbg101 for the PM, you solved my problem and save a lot of time!

 You are most welcome! 

I've received so much help from the community, either directly or by reading the answers others received on their struggles, that it's great to be able to give back some help as I'm able to do so. :)

Thanks Nathan ! Works great :), one tiny question , for the audio is there a possibility to add effects to the background when a sound playing ...

That's beyond the scope of this thread, and would be better asked over at the VideoJS community (which I believe is on Stack Overflow). That said, I did look into this before, but didn't have any success. You'd probably need to have custom work done to have this feature.

Cool Man . Thanks anyway for the This great video :)