如何将视频mp4直接用地址来实现前端点击播放栏目跳转到第三方链接（该链接）的方法。这样的目的是为了节省本服务器流量的压力。也能够用权限来控制是否权限内能够跳转这个地址。如图操作方法
前端的话只需将view_media_play.htm页面里面的内容改为以下代码即可：（不同的效果）
第一个是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>正在跳转···</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
/* 确保页面和body占据整个视口并居中内容 */
html,
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 对a标签进行样式设置，可根据需求调整 */
a {
display: inline-block;
padding: 15px 30px;
<!-- background-color: #007BFF; -->
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
{eyou:videoplay aid='$eyou.field.aid' autoplay='off' id='video'}
<a href="{$video.file_url}" {$video.id} loop='loop'>正在跳转<span id="countdown"></span></a>
{$video.hidden}
{/eyou:videoplay}
<script>
window.onload = function () {
const link = document.querySelector('a');
const countdownElement = document.getElementById('countdown');
let countdown = 10;
const countdownInterval = setInterval(() => {
countdownElement.textContent = `倒计时 ${countdown} 秒`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
if (link) {
const url = link.href;
window.location.href = url;
}
}
}, 1000);
};
</script>
</body>
</html>
效果图：
JS代码说明：
<script>
window.onload = function () {
const link = document.querySelector('a');
const countdownElement = document.getElementById('countdown');
let countdown = 10;
const countdownInterval = setInterval(() => {
countdownElement.textContent = `倒计时 ${countdown} 秒`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
if (link) {
const url = link.href;
window.location.href = url;
}
}
}, 1000);
};
</script>
let countdown = 10; 这句话中间的10说明：倒计时10秒
}, 1000); 这中间的1000 说明：1秒后开始倒计时（1000等于1秒）
第二种效果是没有倒计时的效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>正在跳转···</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
/* 确保页面和body占据整个视口并居中内容 */
html,
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 对a标签进行样式设置，可根据需求调整 */
a {
display: inline-block;
padding: 15px 30px;
<!-- background-color: #007BFF; -->
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
{eyou:videoplay aid='$eyou.field.aid' autoplay='off' id='video'}
<a href="{$video.file_url}" {$video.id} loop='loop'>正在跳转中····</a>
{$video.hidden}
{/eyou:videoplay}
<script>
window.onload = function () {
const link = document.querySelector('a');
const countdownElement = document.getElementById('countdown');
let countdown = 3;
const countdownInterval = setInterval(() => {
countdownElement.textContent = `倒计时 ${countdown} 秒`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
if (link) {
const url = link.href;
window.location.href = url;
}
}
}, 3000);
};
</script>
</body>
</html>
JS说明：
<script>
window.onload = function () {
const link = document.querySelector('a');
const countdownElement = document.getElementById('countdown');
let countdown = 3;
const countdownInterval = setInterval(() => {
countdownElement.textContent = `倒计时 ${countdown} 秒`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
if (link) {
const url = link.href;
window.location.href = url;
}
}
}, 3000);
};
</script>
其中
}, 3000); 3000为3秒后跳转
第三种是。没有样式直接跳转
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>正在跳转···</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
{eyou:videoplay aid='$eyou.field.aid' autoplay='off' id='video'}
<a href="{$video.file_url}" {$video.id} loop='loop'>点击跳转</a>
{$video.hidden}
{/eyou:videoplay}
<script>
// 等待页面加载完成
window.onload = function () {
// 直接选择第一个 a 标签
const link = document.querySelector('a');
// 延迟 3 秒后跳转，可根据需要调整时间
setTimeout(function () {
if (link) {
// 获取 a 标签的 href 属性值
const url = link.href;
// 执行跳转
window.location.href = url;
}
}, 3000);
};
</script>
</body>
</html>
发表评论
加载中~