343 lines
18 KiB
HTML
343 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<title>{{.metaTitle}}</title>
|
||
{{template "seoCommon" .}}
|
||
{{/* 夸克 / QQ(X5)：页内播放适配。不要写 x5-fullscreen，否则 QQ 会接管成系统播放器 */}}
|
||
<meta name="renderer" content="webkit">
|
||
<meta name="force-rendering" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="x5-orientation" content="portrait">
|
||
<meta name="x5-page-mode" content="app">
|
||
<meta name="browsermode" content="application">
|
||
<meta name="imagemode" content="force">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<script src="/static/js/common/compat.js?v=4"></script>
|
||
<link rel="stylesheet" href="/static/css/base.css">
|
||
<link rel="stylesheet" href="/static/css/recharge-modal.css?v=2">
|
||
<link rel="stylesheet" href="/static/common/DPlayer.min.css">
|
||
<link rel="stylesheet" href="/static/css/play.css?v=25">
|
||
<script defer src="/static/common/hls.min.js"></script>
|
||
<script defer src="/static/common/DPlayer.min.js?v=2"></script>
|
||
</head>
|
||
<body class="page-play page-series-play">
|
||
{{template "header" .}}
|
||
|
||
<header class="page-subheader only-h5" aria-label="播放页顶栏">
|
||
<a class="page-subheader__btn" href="javascript:history.back()" aria-label="返回">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回">
|
||
</a>
|
||
<div class="page-subheader__title">{{if .video.Title}}{{.video.Title}}{{else}}视频播放{{end}}</div>
|
||
<button class="page-subheader__btn" type="button" aria-label="分享" data-share-page>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/share.svg" alt="分享">
|
||
</button>
|
||
</header>
|
||
|
||
<div class="page play-page">
|
||
<main class="main play-main">
|
||
<nav class="breadcrumb play-breadcrumb only-pc" aria-label="面包屑">
|
||
<a class="breadcrumb__item" href="/">首页</a>
|
||
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
<a class="breadcrumb__item" href="/series">视频</a>
|
||
<img decoding="async" loading="lazy" class="breadcrumb__sep" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
<span class="breadcrumb__item is-current">{{if .video.Title}}{{.video.Title}}{{else}}播放{{end}}</span>
|
||
</nav>
|
||
|
||
<section class="play-stage" aria-label="播放器">
|
||
<div
|
||
class="play-player{{if not .canWatch}} play-player--locked{{end}}"
|
||
data-play-player
|
||
data-video-id="{{.videoID}}"
|
||
data-can-watch="{{if .canWatch}}1{{else}}0{{end}}"
|
||
>
|
||
{{if and .canWatch .videoURL}}
|
||
<div class="dplayer-video" data-url="{{.videoURL}}"></div>
|
||
{{end}}
|
||
|
||
<img decoding="async" loading="lazy"
|
||
class="play-player__cover lazy"
|
||
src="/static/images/placeholder.png?v=2"
|
||
data-src="{{if .cover}}{{.cover}}{{else}}{{.video.Video.Cover}}{{end}}"
|
||
|
||
data-play-poster
|
||
alt="{{if .video.Title}}{{.video.Title}}{{else}}视频{{end}}"
|
||
>
|
||
<div class="play-player__scrim" aria-hidden="true"></div>
|
||
<div class="play-player__dim" aria-hidden="true"></div>
|
||
|
||
<button
|
||
class="play-player__center"
|
||
type="button"
|
||
aria-label="播放"
|
||
{{if .canWatch}}data-play-poster-play{{end}}
|
||
>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
|
||
</button>
|
||
|
||
{{if not .canWatch}}
|
||
<div class="play-player__unlock">
|
||
<div class="play-player__unlock-icon" aria-hidden="true">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock.svg" alt="解锁">
|
||
</div>
|
||
<p class="play-player__unlock-ep">{{if .video.Title}}{{.video.Title}}{{else}}视频{{end}}</p>
|
||
<p class="play-player__unlock-title">暂无法播放</p>
|
||
<p class="play-player__unlock-desc">当前视频地址不可用，请稍后再试。</p>
|
||
<div class="play-player__unlock-actions">
|
||
{{$appAddr := .appConfig.AppAddr}}
|
||
<a class="play-player__unlock-app" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="下载">
|
||
下载 App 免费看
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="play-player__badge">
|
||
<span class="only-pc">正片{{if .video.Video.VideoTime}} {{formatMediaTime .video.Video.VideoTime}}{{end}}</span>
|
||
<span class="only-h5">{{if .video.Video.VideoTime}}{{formatMediaTime .video.Video.VideoTime}}{{else}}正片{{end}}</span>
|
||
</div>
|
||
|
||
{{if not .canWatch}}
|
||
<div class="play-player__bar">
|
||
<div class="play-player__progress" aria-hidden="true">
|
||
<span class="play-player__progress-fill" style="width:0%"></span>
|
||
<span class="play-player__progress-thumb" style="left:0%"></span>
|
||
</div>
|
||
<div class="play-player__controls">
|
||
<div class="play-player__left">
|
||
<button class="play-player__icon" type="button" aria-label="播放" disabled>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play.svg" alt="播放">
|
||
</button>
|
||
<span class="play-player__time">00:00{{if .video.Video.VideoTime}} / {{formatMediaTime .video.Video.VideoTime}}{{end}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
<div class="play-tabs" aria-label="内容类型">
|
||
<a class="play-tabs__item is-active" href="#">正片</a>
|
||
<!-- <p class="play-tabs__hint only-pc">有播放地址时可直接观看</p> -->
|
||
</div>
|
||
</section>
|
||
|
||
<section class="play-info" aria-label="剧集信息">
|
||
<div class="play-meta">
|
||
<div class="play-meta__title-row">
|
||
<h1 class="play-meta__title">{{if .video.Title}}{{.video.Title}}{{else}}视频{{end}}</h1>
|
||
<span class="badge badge--hot">影集</span>
|
||
</div>
|
||
<div class="play-meta__chips">
|
||
{{if .video.Video.VideoTime}}<span class="play-chip">{{.video.Video.VideoTime}} 分钟</span>{{end}}
|
||
{{if and .video.Video.Width .video.Video.Height}}<span class="play-chip">{{.video.Video.Width}}×{{.video.Video.Height}}</span>{{end}}
|
||
<span class="play-chip">18+</span>
|
||
</div>
|
||
<p class="play-meta__stats only-pc">
|
||
{{if .video.TagsName}}标签 {{range $i, $t := .video.TagsName}}{{if $i}} {{end}}{{$t}}{{end}} {{end}}
|
||
{{if .video.WatchTimes}}热度 {{formatLikeCount .video.WatchTimes}}{{end}}
|
||
</p>
|
||
<p class="play-meta__stats only-h5">
|
||
{{range $i, $t := .video.TagsName}}{{if $i}} {{end}}{{$t}}{{end}}
|
||
{{if .video.WatchTimes}} 热度 {{formatLikeCount .video.WatchTimes}}{{end}}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="play-actions">
|
||
<button
|
||
class="btn btn--primary play-actions__btn play-actions__btn--play"
|
||
type="button"
|
||
{{if .canWatch}}data-play-poster-play{{end}}
|
||
{{if not .canWatch}}disabled{{end}}
|
||
>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
|
||
<span>立即播放</span>
|
||
</button>
|
||
<button
|
||
class="btn btn--ghost play-actions__btn play-actions__btn--icon{{if eq .video.IsLike 1}} is-active{{end}}"
|
||
type="button"
|
||
aria-label="{{if eq .video.IsLike 1}}取消点赞{{else}}点赞{{end}}"
|
||
data-video-like
|
||
data-video-id="{{.videoID}}"
|
||
data-liked="{{if eq .video.IsLike 1}}1{{else}}2{{end}}"
|
||
data-like-raw="{{.video.CountLike}}"
|
||
{{if le .videoID 0}}disabled{{end}}
|
||
>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/heart.svg" alt="点赞">
|
||
<span class="only-pc" data-video-like-label>{{if eq .video.IsLike 1}}已点赞{{else}}点赞{{end}}</span>
|
||
</button>
|
||
<button
|
||
class="btn btn--ghost play-actions__btn play-actions__btn--icon{{if eq .video.IsCollect 1}} is-active{{end}}"
|
||
type="button"
|
||
aria-label="{{if eq .video.IsCollect 1}}取消收藏{{else}}收藏{{end}}"
|
||
data-video-collect
|
||
data-video-id="{{.videoID}}"
|
||
data-collected="{{if eq .video.IsCollect 1}}1{{else}}2{{end}}"
|
||
data-collect-raw="{{.video.CountCollect}}"
|
||
{{if le .videoID 0}}disabled{{end}}
|
||
>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/bookmark.svg" alt="收藏">
|
||
<span class="only-pc" data-video-collect-label>{{if eq .video.IsCollect 1}}已收藏{{else}}收藏{{end}}</span>
|
||
</button>
|
||
<button class="btn btn--ghost play-actions__btn play-actions__btn--icon" type="button" aria-label="分享" data-share-page>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/share.svg" alt="分享">
|
||
<span class="only-pc" data-share-page-label>分享</span>
|
||
</button>
|
||
<button class="btn btn--ghost play-actions__btn play-actions__btn--icon" type="button" aria-label="反馈">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/message-circle.svg" alt="评论">
|
||
<span class="only-pc">反馈</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="play-synopsis">
|
||
<div class="play-synopsis__head">
|
||
<h2 class="play-synopsis__title">简介</h2>
|
||
<button class="play-synopsis__more" type="button">
|
||
展开
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</button>
|
||
</div>
|
||
<p class="play-synopsis__text">{{if .seoInfo.Description}}{{.seoInfo.Description}}{{else if .video.Title}}{{.video.Title}}{{else}}暂无简介{{end}}</p>
|
||
</div>
|
||
</section>
|
||
|
||
{{template "playLinks" .}}
|
||
|
||
<div class="play-promo">
|
||
{{if .advitise}}{{template "ads" (adSlice .advitise.DetailBannerList 0 2)}}{{end}}
|
||
</div>
|
||
|
||
<section class="play-dual" aria-label="评论与热榜">
|
||
{{template "playComments" .}}
|
||
|
||
<aside class="play-hot" aria-label="热门短剧">
|
||
<div class="play-hot__head">
|
||
<h2 class="play-hot__title">热门短剧</h2>
|
||
<a class="play-hot__more" href="{{if .hotMoreURL}}{{.hotMoreURL}}{{else}}/list/all/0/2{{end}}" {{externalLinkAttrs .hotMoreURL}}>
|
||
完整榜单
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</a>
|
||
</div>
|
||
<ol class="play-hot__list">
|
||
{{range $i, $item := .hotList}}
|
||
<li{{if ge $i 5}} class="only-pc"{{end}}>
|
||
<div class="play-hot__item">
|
||
<a class="play-hot__no{{if lt $i 3}} is-top{{end}}" href="{{playURL $item.Slug $item.ID}}">{{rankNo (add $i 1)}}</a>
|
||
<a class="play-hot__cover-link" href="{{playURL $item.Slug $item.ID}}">
|
||
<img decoding="async" loading="lazy" class="play-hot__cover lazy" src="/static/images/placeholder.png?v=2" data-src="{{$item.Cover}}" alt="{{playletDisplayName $item.PlayName $item.Title}}封面">
|
||
</a>
|
||
<span class="play-hot__info">
|
||
<a class="play-hot__name" href="{{playURL $item.Slug $item.ID}}">{{playletDisplayName $item.PlayName $item.Title}}</a>
|
||
<span class="play-hot__meta">
|
||
{{$tags := cardTags $item}}
|
||
{{range $ti, $tag := $tags}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}
|
||
{{if and $tags $item.TotalEpisode}} {{end}}{{if $item.TotalEpisode}}全 {{$item.TotalEpisode}} 集{{end}}
|
||
</span>
|
||
</span>
|
||
<a class="play-hot__heat" href="{{playURL $item.Slug $item.ID}}">{{formatLikeCount $item.HeatValue}}</a>
|
||
</div>
|
||
</li>
|
||
{{else}}
|
||
<li><p class="play-comment__text" style="padding:12px 0;color:var(--muted, #888)">暂无热榜数据</p></li>
|
||
{{end}}
|
||
</ol>
|
||
</aside>
|
||
</section>
|
||
|
||
{{if .guessLike}}
|
||
<section class="play-like" aria-label="猜你喜欢">
|
||
<div class="play-like__head">
|
||
<div class="play-like__titles">
|
||
<h2 class="play-like__title">猜你喜欢</h2>
|
||
<span class="play-like__desc only-pc">根据本剧题材推荐</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="play-like__refresh"
|
||
data-guess-refresh
|
||
data-playlet-id="{{.guessPlayletID}}"
|
||
data-page="{{.guessPage}}"
|
||
data-page-size="{{if .guessPageSize}}{{.guessPageSize}}{{else}}6{{end}}"
|
||
data-total="{{.guessTotal}}"
|
||
>
|
||
换一批
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
|
||
</button>
|
||
</div>
|
||
<div class="play-like__grid" id="play-like" data-guess-grid>
|
||
{{range .guessLike}}
|
||
<article class="card card--play">
|
||
<a class="card__cover lazy" href="{{playURL .Slug .ID}}" style="{{cssCoverPlaceholder}}" data-src="{{.Cover}}">
|
||
{{if .TotalEpisode}}<span class="card__ep">全 {{.TotalEpisode}} 集</span>{{else}}<span class="card__ep">{{updateStatusText .UpdateStatus}}</span>{{end}}
|
||
</a>
|
||
<h3 class="card__title"><a href="{{playURL .Slug .ID}}">{{playletDisplayName .PlayName .Title}}</a></h3>
|
||
<p class="card__meta">{{range $ti, $tag := cardTags .}}{{if $ti}} {{end}}{{if $tag.URL}}<a href="{{$tag.URL}}" {{externalLinkAttrs $tag.URL}}>{{$tag.Name}}</a>{{else}}{{$tag.Name}}{{end}}{{end}}</p>
|
||
</article>
|
||
{{end}}
|
||
</div>
|
||
</section>
|
||
{{end}}
|
||
|
||
<div class="play-promo play-promo--bottom">
|
||
{{if .advitise}}{{template "ads" (adSlice .advitise.DetailBannerList 2 2)}}{{end}}
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
{{template "footer" .}}
|
||
|
||
<div
|
||
class="play-coin play-coin--short"
|
||
data-play-coin
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="play-coin-title"
|
||
>
|
||
<div class="play-coin__mask" data-play-coin-close aria-hidden="true"></div>
|
||
<div class="play-coin__panel">
|
||
<div class="play-coin__handle" aria-hidden="true"></div>
|
||
<div class="play-coin__head">
|
||
<div class="play-coin__copy">
|
||
<h2 class="play-coin__title" id="play-coin-title">金币不足</h2>
|
||
<p class="play-coin__desc only-pc">本集需 38 金币，当前余额 12 金币，充值后即可播放。</p>
|
||
<p class="play-coin__desc only-h5">本集需 38 金币，当前余额 12 金币</p>
|
||
</div>
|
||
<button class="play-coin__close" type="button" data-play-coin-close aria-label="关闭">
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
|
||
</button>
|
||
</div>
|
||
<div class="play-coin__sheet">
|
||
<div class="play-coin__row">
|
||
<span class="play-coin__label">当前余额</span>
|
||
<span class="play-coin__value is-low">12 金币</span>
|
||
</div>
|
||
<div class="play-coin__divider" aria-hidden="true"></div>
|
||
<div class="play-coin__row">
|
||
<span class="play-coin__label">本次消耗</span>
|
||
<span class="play-coin__cost">38 金币</span>
|
||
</div>
|
||
</div>
|
||
<p class="play-coin__note">后续付费剧集仍需逐集确认</p>
|
||
<button class="btn btn--primary play-coin__pay" type="button" data-recharge-open>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/gift.svg" alt="礼物">
|
||
去充值 首充加赠 10%
|
||
</button>
|
||
<div class="play-coin__foot">
|
||
{{$appAddr := .appConfig.AppAddr}}
|
||
<a class="play-coin__app" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
|
||
<img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/download.svg" alt="下载">
|
||
下载 App 免费看
|
||
</a>
|
||
<button class="play-coin__skip" type="button" data-play-coin-close>暂不观看</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{template "rechargeModal" .}}
|
||
|
||
<script defer src="/static/js/pages/play.js?v=41"></script>
|
||
<script defer src="/static/js/recharge-modal.js?v=5"></script>
|
||
</body>
|
||
</html>
|