案例一
修改前
<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 %}
思路就非常的清晰,后面的人也好维护代码。都是一些细节吧。