video-template-2

This commit is contained in:
make
2025-05-08 20:48:57 +08:00
parent ecbbb27f3f
commit a228bb8083
63 changed files with 8282 additions and 231 deletions

View File

@@ -285,8 +285,46 @@ function addHistoryFun(VideoInfo) {
}
function displayHistory() {
const defaultTemplate = `
<li class="active clearfix">
<div class="thumb">
<a class="v-thumb stui-vodlist__thumb lazyload-bg"
href="{{videoUrl}}"
title="{{videoName}}"
data-src="{{videoPic}}">
<span class="play hidden-xs"></span>
<span class="pic-text text-right">{{videoRemarks}}</span>
</a>
</div>
<div class="detail">
<h3 class="title">
<a href="{{videoUrl}}">{{videoName}}</a>
</h3>
<p class="hidden-mi">
<span class="text-muted">简介:</span>
{{videoDescription}}
</p>
<p class="hidden-mi">
<span class="text-muted">类型:</span>
{{videoCategory}}
<span class="split-line"></span>
<span class="hidden-xs">
<span class="split-line"></span>
<span class="text-muted">年份:</span>
{{videoYear}}
</span>
</p>
<p class="margin-0">
<a class="btn btn-min btn-primary" href="{{videoPlayUrl}}">立即播放</a>
  
<a class="btn btn-min btn-default" href="{{videoUrl}}">查看详情</a>
</p>
</div>
</li>
`;
// 渲染历史记录函数,接受自定义模板参数
function displayHistory(template = defaultTemplate) {
// 获取数据
const arrHistory = JSON.parse(localStorage.getItem(strHistoryKey)) || [];
@@ -297,103 +335,50 @@ function displayHistory() {
// 渲染列表
const historyContainer = document.getElementById('historyContainer');
if (!historyContainer) {
console.error('历史记录容器未找到');
return;
}
historyContainer.innerHTML = ''; // 清空原内容
arrHistory.forEach(Video => {
const VideoElement = document.createElement('li');
let strVideoUrl = formatVideoUrl(Video.v_name_en, Video.v_id)
let strVideoPlayUrl = formatVideoPlayUrl(Video.v_name_en,Video.v_id, 'default', 1)
let strSearchUrl = formatSearchUrl(Video.v_name, 1)
if (isMobile()) {
VideoElement.innerHTML = `
<li class="active clearfix">
<div class="thumb">
<a class="v-thumb stui-vodlist__thumb lazyload-bg"
href='${strVideoUrl}'
title="${Video.v_name}"
data-src="${Video.v_pic}">
<span class="play hidden-xs"></span>
<span class="pic-text text-right">${Video.v_remarks}</span>
</a>
</div>
<div class="detail">
<h3 class="title">
<a href='${strVideoUrl}'>${Video.v_name}</a>
</h3>
<p class="hidden-mi">
<span class="text-muted">简介:</span>
${Video.v_description}
</p>
<p class="hidden-mi">
<span class="text-muted">类型:</span>
${Video.v_category}
<span class="split-line"></span>
<span class="hidden-xs">
<span class="split-line"></span>
<span class="text-muted">年份:</span>
${Video.v_year}
</span>
</p>
<p class="margin-0">
<a class="btn btn-min btn-primary" href='${strVideoPlayUrl}'>立即播放</a>
&nbsp;&nbsp;
<a class="btn btn-min btn-default" href='${strVideoUrl}'>查看详情</a>
</p>
</div>
</li>
`;
} else {
VideoElement.innerHTML = `
<li class="active clearfix">
<div class="thumb">
<a class="v-thumb stui-vodlist__thumb lazyload-bg"
href='${strVideoUrl}'
title="${Video.v_name}"
data-src="${Video.v_pic}">
<span class="play hidden-xs"></span>
<span class="pic-text text-right">${Video.v_remarks}</span>
</a>
</div>
<div class="detail">
<h3 class="title">
<a href='${strVideoUrl}'>${Video.v_name}</a>
</h3>
<p class="hidden-mi">
<span class="text-muted">简介:</span>
${Video.v_description}
</p>
<p class="hidden-mi">
<span class="text-muted">类型:</span>
${Video.v_category}
<span class="split-line"></span>
<span class="hidden-xs">
<span class="split-line"></span>
<span class="text-muted">年份:</span>
${Video.v_year}
</span>
</p>
<p class="margin-0">
<a class="btn btn-min btn-primary" href='${strVideoPlayUrl}'>立即播放</a>
&nbsp;&nbsp;
<a class="btn btn-min btn-default" href='${strVideoUrl}'>查看详情</a>
</p>
</div>
</li>
`;
}
historyContainer.appendChild(VideoElement);
arrHistory.forEach((video) => {
// 生成URL
const strVideoUrl = formatVideoUrl(video.v_name_en, video.v_id);
const strVideoPlayUrl = formatVideoPlayUrl(video.v_name_en, video.v_id, 'default', 1);
const strSearchUrl = formatSearchUrl(video.v_name, 1);
// 替换模板中的占位符
const renderedTemplate = template
.replace(/{{videoUrl}}/g, strVideoUrl)
.replace(/{{videoName}}/g, escapeHtml(video.v_name)) // 防止XSS
.replace(/{{videoPic}}/g, escapeHtml(video.v_pic))
.replace(/{{videoRemarks}}/g, escapeHtml(video.v_remarks))
.replace(/{{videoDescription}}/g, escapeHtml(video.v_description))
.replace(/{{videoCategory}}/g, escapeHtml(video.v_category))
.replace(/{{videoYear}}/g, escapeHtml(video.v_year))
.replace(/{{videoActor}}/g, escapeHtml(video.v_area))
.replace(/{{videoPlayUrl}}/g, strVideoPlayUrl)
.replace(/{{searchUrl}}/g, strSearchUrl);
// 创建元素并添加到容器
const videoElement = document.createElement('li');
videoElement.innerHTML = renderedTemplate;
historyContainer.appendChild(videoElement);
});
}
// 防止XSS攻击的转义函数
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>"']/g, (match) => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
}[match]));
}
// 方法1使用 fetch API
async function reportStats(data) {
try {
@@ -509,11 +494,12 @@ document.addEventListener("DOMContentLoaded", function () {
var ActivePlayUrl = arrPlayUrl[strPlayType][intPlayUrlIndex - 1]
strPlayUrl = ActivePlayUrl.url
}
initDPlayer(strPlayUrl)
}
addHistoryFun()
}
})