菜单开关

周梦康 发表于 2018-10-18 141 次浏览

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

案例一

修改前

<div class="yq-video" {% if isStarted %}id="player"{% endif %}>
    {% if isStarted %}
    {% else %}
        <img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt="">
    {% endif %}
</div>

解释下上面的代码,只有在isStarted为真的时候,才需要加上 id,然后就会渲染播放器,否则就只显示一张图片。

修改后

{% if isStarted %}
    <div class="yq-video" id="player"></div>
{% else %}
    <div class="yq-video"><img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt=""></div>
{% endif %}

案例二

原来的代码

{%if isOver %}
    {% if live.otherConfig.replayVideoUrl %}
        <iframe src="{{ live.otherConfig.replayVideoUrl }}" frameborder="0"
            style="width: 100%;height: 100%;" class="video-iframe"
            id="video-iframe"></iframe>
    {% else %}
        <img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt="">
    {% endif %}
{% elseif isStarted %}
    <iframe src="{{ live.pcurl }}" frameborder="0" style="width: 100%;height: 100%;"
            class="video-iframe" id="video-iframe"></iframe>
{% else %}
    <img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt="">
{% endif %}

在直播结束时,又还未生成回放视频时再加个遮罩

{%if isOver %}
    {% if live.otherConfig.replayVideoUrl %}
        
    {% else %}
        # 加遮罩
    {% endif %}
{% endif %}

整理后

class LiveTimeLine
{
    const BEFORE_START = 1; // 直播开始前
    const LIVING = 2; // 直播中
    const END_BUT_NO_VOD = 3;  // 直播结束但是没有生成 vod
    const REPLAY = 4; // 回放

    public static function getStatus(Live $live,LiveVod $liveVod){
        $now = date("Y-m-d H:i:s");
        if($now < $live->begindate) {
            return self::BEFORE_START;
        }elseif($now >= $live->begindate && $now <= $live->enddate) {
            return self::LIVING;
        }else{
            if ($liveVod->videoId) {
                return self::REPLAY;
            }else{
                return self::END_BUT_NO_VOD;
            }
        }
    }
}
{% if timeLine == 1 %}
    <img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt="">
{% elseif timeLine == 2 %}
    <iframe src="{{ live.pcurl }}" frameborder="0" style="width: 100%;height: 100%;"
            class="video-iframe" id="video-iframe"></iframe>
{% elseif timeLine == 3 %}
    <img style="width: 100%;height: 100%" src="{{ live.coverImage }}" alt="">
{% else %}
    <iframe src="{{ live.otherConfig.replayVideoUrl }}" frameborder="0"
            style="width: 100%;height: 100%;" class="video-iframe"
            id="video-iframe"></iframe>
{% endif %}

思路就非常的清晰,后面的人也好维护代码。都是一些细节吧。

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表