javascript - 如何将 HTML5 Video.js 安装到 Boonex Dolphin 中？

Question

目前我正在尝试使用Video.js 源代码来更改我网站上使用Boonex Dolphin 的当前视频播放器，本质上我想替换它使用的 Flash 播放器并切换到 HTML5，Dolphin 使用模块，并且在这些模块中他们指向特定文件。我不知道哪些文件是 HTML 文件还是 PHP 文件，或者我需要更改哪些文件，但我有一个大致的想法。我只需要被放在正确的方向。

谢谢，如果有人回复，对不起，如果我问错了地方，或者已经问过（我先搜索）。

Answer 1

根据这里的帖子

只需编辑以下文件。模块/boonex/html5av/classes/BxH5avModule.php

---

在第 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;
        }

---

用这个替换那部分代码。

            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;
                }