how to replace html5 video player

How do I replace the html5 video player with this open source one? I am hoping that it will allow people to seek through the video in Chrome.

videojs.com

I actually integrated this very player into Dolphin a few months back. It's very simple, and requires only a few quick changes to the HTML5 player module's files. See here for the instructions: https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md

The HTML5 embed code is inside /modules/boonex/html5av/classes/BxH5avModule.php. Keep in mind that this is a video player, so to have audio use it, you need to change all audio embed code to videos.

So does it allow users to seek through the video?

I haven't tested it recently in Chrome, but from the test video on the project's site, it does look to work fine.

So replace this:

<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 . '" />

                            ' . (BX_H5AV_FALLBACK ? $sFlash : '<b>Can not playback media - your browser doesn\'t support HTML5 audio/video tag.</b>') . '

                        </video>

                        <script>

                            var eFile = $("#' . $sId . '");

                            eFile.on("play", function () {

                                var ePlaying = this;

                                $("video").each(function () {

                                    if (this != ePlaying)

                                        this.pause();

                                });

                            });

                            ' . $sJs . '

                        </script>';

With this at line 90?:

<video id="example_video_1" class="video-js vjs-default-skin"

  controls preload="auto" width="640" height="264"

  poster="http://video-js.zencoder.com/oceans-clip.png"

  data-setup='{"example_option":true}'>

 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />

 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />

 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />

 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>

</video>

 Wait, what?

I put this right before the </header> of the template:

<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>

No, you need to adapt the embed code in the PHP file. Basically, add the classes (class="video-js vjs-default-skin") and data-setup (data-setup="") to the front, right after "video" in the tag. And the forums keep breaking when I try to post the code!

Edit: Also note that there are several embeds in that file. So make sure all the video embeds are updated.

Edit: Deano posted a better example below, which takes into account some quirks related to the VideoJS CSS and file buffering.

Like this:

<video class="video-js vjs-default-skin" data-setup=""  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 . '" /> 

                            ' . (BX_H5AV_FALLBACK ? $sFlash : '<b>Can not playback media - your browser doesn\'t support HTML5 audio/video tag.</b>') . '

                        </video>

Yes, although you posted the class and data-setup twice. Once done, and the JavaScript is added to the header, clear all cache and try a video.

The video is outside of the player.

 The video is beneath the player.

Looks like it wasn't added right. If you'd like, I can take a look and quickly try and add it to your site. I'll need your control panel login (usually cPanel) to make the changes.

I did this on my site months ago. I have not released it because i still needed to get the video play time to update properly.

See my video tutorials section on my site to see it in action. Works well on all browsers including mobile. http://www.deanbassett.com

Anyhow. It's finished.

Just edit the following file. modules/boonex/html5av/classes/BxH5avModule.php

-------------------------------------------------------
Replace this section of code at line 56.
-------------------------------------------------------

            case STATUS_APPROVED:
                if (file_exists($sFilesPath . $iFileId . M4V_EXTENSION)) {

                    $sToken = getToken($iFileId);

                    if (file_exists($sFilesPath . $iFileId . '.webm'))
                        $sSourceWebm = '<source type=\'video/webm; codecs="vp8, vorbis"\' src="' . BX_DOL_URL_ROOT . "flash/modules/video/get_file.php?id=" . $iFileId . "&ext=webm&token=" . $sToken . '" />';

                    $sFlash = getApplicationContent('video','player',array('id' => $iFileId, 'user' => getLoggedId(), 'password' => clear_xss($_COOKIE['memberPassword'])),true);
                    $sId = 'bx-media-' . genRndPwd(8, false);
                    $sJs = $sSourceWebm ? // if no .webm video available - we need nice fallback in firefox and other browsers with no mp4 support
                            '' : '
                            var eMedia = document.createElement("video");
                            if (eMedia.canPlayType && !eMedia.canPlayType("video/x-m4v")) {
                                var sReplace = "' . bx_js_string(BX_H5AV_FALLBACK ? $sFlash : '<b>Your browser doesn\'t support this media playback.</b>', BX_ESCAPE_STR_QUOTE) . '";
                                $("#' . $sId . '").replaceWith(sReplace);
                            }';
                    $sJs .= $aFile['Time'] ? // if length is not set
                            '' : '
                            var eFile = $("#' . $sId . '");
                            eFile.on("canplay", function (e) {
                                $.post("' . BX_DOL_URL_ROOT . 'flash/XML.php", {
                                    module: "video",
                                    action: "updateFileTime",
                                    id: ' . $iFileId . ',
                                    time: parseInt(this.duration * 1000)
                                });
                            });';

                    $sAutoPlay = TRUE_VAL == getSettingValue('video', 'autoPlay') && class_exists('BxVideosPageView') ? 'autoplay' : '';
                   
                    $sFilePoster = 'flash/modules/video/files/' . $iFileId . '.jpg';
                    $sPoster = file_exists(BX_DIRECTORY_PATH_ROOT . $sFilePoster) ? ' poster="' . BX_DOL_URL_ROOT . $sFilePoster . '" ' : '';

                    $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 . '" />
                            ' . (BX_H5AV_FALLBACK ? $sFlash : '<b>Can not playback media - your browser doesn\'t support HTML5 audio/video tag.</b>') . '
                        </video>
                        <script>
                            ' . $sJs . '
                        </script>';
                break;
                }

-------------------------------------------------------
Replace that section of code with this.
-------------------------------------------------------

            case STATUS_APPROVED:
                if (file_exists($sFilesPath . $iFileId . M4V_EXTENSION)) {
                    // Video JS Player
                    $mediaroot  = BX_DOL_URL_ROOT . 'flash/modules/video/files/';
                    $sJs = $aFile['Time'] ? // if length is not set
                            '' : '
                            var eFile = $("#video_' . $iFileId . '");
                            eFile.on("canplay", function (e) {
                                $.post("' . BX_DOL_URL_ROOT . 'flash/XML.php", {
                                    module: "video",
                                    action: "updateFileTime",
                                    id: ' . $iFileId . ',
                                    time: parseInt(this.duration * 1000)
                                });
                            });';
                    $sJs = '<script>' . $sJs . '</script>';
                    $sOverride    = <<<CODE
                      <link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
                      <script src="//vjs.zencdn.net/4.9/video.js"></script>
                      <video id="video_{$iFileId}" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="100%" height="430"
                          poster="{$mediaroot}{$iFileId}.jpg"
                          data-setup="{}">
                        <source src="{$mediaroot}{$iFileId}.m4v" type='video/mp4' />
                        <source src="{$mediaroot}{$iFileId}.webm" type='video/webm' />
                      </video>
                      {$sJs}
CODE;

                    $sOverride = '<div class="viewFile" style="width:100%;">' . $sOverride . '</div>';

                break;
                }

We are not really replacing the HTML5 player, we are adding one so that we can have a consistent player across all browsers.  Note if you insert the <video> tag on a page, the browser will render a player and each browser's player is different.  I encourage one to read up on HTML5 video specifications.

I added a different one than the video.js player; you can use the one that you like the best.  However, I have not been able to add any of the jquery based players.  My guess is there is a conflict with some existing jquery code on Dolphin and I did not want to bother tracking it down.  If someone has been able to add a jquery based player then please post.

I posted this in a separate topic but note that the code submitted here is getting the height of the player from the flash settings; with width set to 100%.  There are settings in the admin for the width and height of the video player.  We should read those values for setting up our HTML5 player.  AlexT gave a rather lame answer, and only a half answer at that, to my question.  I think that HL gave the real answer to my question

By the way, it was noted that this is just a video player.  I think video.js will be updated so it can be used as an audio player as well.  There are other solutions that also include audio if one does not want to wait.  If you look lower down in the code you will see where the audio player is created as the module handles both; hence the name html5av.

It works fine with <audio> tags now. It does still show the fullscreen option and sets a height, but those can easily be corrected (just add a <style> tag to the output, and disable fullscreen in the data-setup).

Here's the BxH5avModule.php file from Dolphin 7.1.4 - just replace the original file with this to load VideoJS. Works for videos, video comments, and audio. I'll probably update this later to correct some things with <audio> (like adding that data-setup).

Also note that you don't have to pull the height setting from the flash settings; you can hard-code a width and height for your player.

I don't know why you'd want to do that instead of just updating the height in the Flash Apps settings.

Perhaps because we want to do it the correct way?  What if I want to set the width?  There is no width setting in the flash settings, go look and see for yourself.

The width is set by the column width of the block - the player takes the full width of the block, and can be resized from the page builder. Yes, if you wanted to set a custom width that is less than the block's width, that would be the only way - but now I feel like you're playing some version of devil's advocate.

Ok I think I found out why my videos are not seeking properly. When I upload a 100mb video using a converting rate of 2048 kb, the video takes a few seconds to start playing and causes an error when I seek through the video. I am using video js. 

So now I am trying different bitrates to see which works best.

What bitrate works best for video conversion without losing quality and keeping the file small for speed while using video js player?

I tried all bitrates and file sizes and it's definitely something else causing this error. I have no idea.

I've only encountered this when the file is loaded via the get_file.php file - when called directly in the video source, it plays normally and allows for smooth skips. I'm afraid besides that, I don't know why this would happen.

 Ok so with the code file you just created, is the video being called directly in the source or is it being loaded via the get_file.php?

I can't find a solution in google either, but I guess there are people having the same problem somewhere:

https://www.google.com/search?q=a+netwrok+error+caused+the+video+download+to+fail+part+way&oq=a+ne&aqs=chrome.0.69i59j69i60l3j69i57j69i59.1642j0j7&sourceid=chrome&es_sm=122&ie=UTF-8

could this have something to do with digital ocean cloud server?

In the example above, get_file.php is used. Your site uses the direct source, unless you replaced it with the above PHP file.