功能概述
组件可传入视频的起止时间,截取起止时间,视频地址和视轨所需参数,在视轨通过滑动鼠标选择被截取的部分,参数以及回调说明如下:
参数描述
| 参数名 | 描述 |
|---|---|
| startTime | 视频开始时间，精确到毫秒 |
| endTime | 视频结束时间，精确到毫秒 |
| spliterStartTime | 视频截取开始时间 |
| spliterEndTime | 视频截取结束时间 |
| url | 视频地址 |
| ffVideo | 视轨所需参数 |
回调描述
| 方法名 | 描述 | 回调形参 | 参数描述 |
|---|---|---|---|
| queryTime | 截取时间段 | Array | [开始时间，结束时间] |
| sure | 确认裁剪 | Array | [开始时间，结束时间] |
| cancel | 取消裁剪 | – | |
| frame | 视轨数组 | Array | [base64字符串] |
环境准备
vue2+vite(老项目是vue2+webpack,经测试,ffmpeg在webpack环境中会报错,所以将项目转成了vite,具体操作与问题后续更新)
vue3的版本可以看看这篇文章
1、安装ffmpeg
注意：在新版本Chrome浏览器中由于安全性问题，只能在https或localhost当中才能正常使用
yarn add @ffmpeg/ffmpeg @ffmpeg/core
或
npm install @ffmpeg/ffmpeg @ffmpeg/core
2、引入并初始化
需要在配置文件中设置请求头,否则会报跨域错误
vite.config.js
server:{
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
}
}
如果是在nginx环境,需要在静态资源服务器的响应中添加响应头,例如Nginx
location / {
root /usr/share/nginx/html/edgestack;
index index.html;
try_files $uri $uri/ /index.html?$query_string;
add_header Cross-Origin-Embedder-Policy 'require-corp';
add_header Cross-Origin-Opener-Policy 'same-origin';
}
3、引入并初始化
import {
createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg();
if(!ffmpeg.isLoaded()) {
ffmpeg.load().catch((err) => {
console.log(err);
});
功能片段
上传文件
async uploadVideo(e) {
let file = e.target.files[0],
{
name } = file,
orgFileBuffer = await file.arrayBuffer(); // 获取文件数据
ffmpeg.FS("writeFile", name, await fetchFile(new Blob([orgFileBuffer]))); // 将视频数据写入内存
let videoUrl = URL.createObjectURL(new Blob([orgFileBuffer])); // 将视频数据转为url
return {
name, videoUrl };
}
视轨
async getVideoFrames() {
try {
let {
name, file, duration } = this.ffVideo;
ffmpeg.FS("writeFile", name, await fetchFile(file));
await ffmpeg.run(
"-i",
name,
"-r",
`${
1}`,//每秒抽一帧,不能直接写变量,只接受字符串
"-ss",
"0",
"-vframes",
`${
20}`,//最多二十张,不能直接写变量,只接受字符串
"-f",
"image2",
"-s",
"88*50",
"image-%02d.png"
);
for (let i = 0; i < 20; i++) {
let temp = i + 1;
if (temp < 10) {
temp = "0" + temp;
}
this.videoFrames.push(
arrayBufferToBase64(ffmpeg.FS("readFile", "image-" + temp + ".png"))
);
}
this.$emit("frame", this.videoFrames);
} catch (err) {
}
}
剪切
async onSureCut(e) {
let startTime = 0,
endTime = 3,
name='上传文件.video',
newName ='新文件名称.video'
try {
await ffmpeg.run(
"-ss",
`${
startTime}`,//开始时间,不能直接写变量,只接受字符串
"-t",
`${
endTime - startTime}`,//时间差,不能直接写变量,只接受字符串
"-i",
name,
"-vcodec",
"copy",
"-acodec",
"copy",
newName
);
let arrayBuffer = ffmpeg.FS("readFile", newName).buffer; // 读取缓存
let blob = new Blob([arrayBuffer]);
let newVideoUrl = URL.createObjectURL(blob); // 转为Blob URL
} catch (err) {
throw err;
}
}
完整代码
剪切组件
<template>
<div class="cut-video">
<video
id="videoPlayer"
@play="onplay"
controls="true"
preload="auto"
muted
class="video"
width="100%"
:src="url"
></video>
<!-- autoplay -->
<!-- crossorigin="anonymous" -->
<ul class="time-list">
<li v-for="(i,n) in data.timeList" :key="n">{
{
i}}</li>
</ul>
<div class="crop-filter">
<div class="timer-shaft" ref="shaft">
<div
class="white-shade"
:style="{width:(data.endLeft-data.startLeft+12)+'px',left:data.startLeft-6+'px'}"
></div>
<div class="left-shade" :style="{width: (data.startLeft)+'px'}"></div>
<div class="right-shade" :style="{width:(shaftWidth-data.endLeft)+'px'}" ref="rightShade"></div>
<div class="strat-circle circle" ref="start" @mousedown="startMouseDown">
<div class="center"></div>
</div>
<div class="end-circle circle" ref="end" @mousedown="endMouseDown">
<div class="center"></div>
</div>
<!-- 此处src应绑定item -->
<img
class="frames"
@dragstart.prevent
:style="{width:`calc(100% / ${videoFrames.length})`}"
v-for="(i,n) in videoFrames"
:key="n"
:src="`data:image/jpg;base64,${i}`"
alt
/>
<!-- src="@/public/favicon.ico" -->
</div>
</div>
<div class="flex">
<button @click="onCancel" type="info" size="mini">Cancel</button>
<button @click="onSureCut" type="primary" size="mini">Next</button>
</div>
</div>
</template>
<!-- 起止时间间隔最小≈1秒 -->
<script>
import {
getNowTime, dateStrChangeTimeTamp } from "@/utils/cutVideo";
import {
createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
import arrayBufferToBase64 from "@/utils/arrayBufferToBase64";
const ffmpeg = createFFmpeg({
log: false });
if (!ffmpeg.isLoaded()) {
ffmpeg.load().catch(err => {
console.log("ffmpeg--err", err);
});
}
export default {
name: "cutVideo",
data() {
return {
shaftWidth: 0,
shaft: null, //进度条dom
start: null, // 开始按钮dom
end: null, //結束按鈕dom
data: {
endLeft: 0, // 结束按钮距离左侧距离
endright: 0, // 结束按钮初始位置
startLeft: 0, // 开始按钮距离左侧距离
roal: 0, // 毫秒/px(1px===的毫秒数)
startTime: "00:00:00.0", // 开始时间
endTime: "00:00:00.0", // 结束时间
timeList: [] // 时间轴显示时间数组
},
videoFrames: []
};
},
props: {
startTime: {
type: String, default: "00:00:00.0" },
endTime: {
type: String, default: "00:00:08.0" },
spliterStartTime: {
type: String, default: "" },
spliterEndTime: {
type: String, default: "" },
url: {
type: String, default: "" },
ffVideo: {
type: Object,
default: () => {
return {
name: "",
file: null,
blob: null,
duration: ""
};
}
}
// videoFrames: { type: Array, default: () => [] }
},
mounted() {
// 随便拼一个1970年以后的年月日字符串+' '
let str = "1970-01-02 ";
let time =
dateStrChangeTimeTamp(str + this.endTime) -
dateStrChangeTimeTamp(str + this.startTime);
this.data.roal = time / this.$refs.shaft.clientWidth;
this.shaftWidth = this.$refs.shaft.clientWidth;
// 结束毫秒数
let endM =
dateStrChangeTimeTamp("1970-01-02 " + this.spliterEndTime) -
1000 * 60 * 60 * 16;
// 开始毫秒数
let startM =
dateStrChangeTimeTamp("1970-01-02 " + this.spliterStartTime) -
1000 * 60 * 60 * 16;
// console.log(startM, endM);
// 设置开始结束位置
this.$refs.start.style.left =
startM / this.data.roal - this.$refs.end.clientWidth / 2 + "px";
this.$refs.end.style.left =
endM / this.data.roal - this.$refs.end.clientWidth / 2 + "px";
this.data.endLeft = this.$refs.end.offsetLeft;
this.data.endright =
this.$refs.shaft.clientWidth - this.$refs.end.clientWidth / 2;
this.data.startLeft =
this.$refs.start.offsetLeft + this.$refs.start.clientWidth / 2;
this.getVideoTime();
this.data.timeList.push(this.startTime);
let paragraph =
(dateStrChangeTimeTamp(str + this.endTime) - 1000 * 60 * 60 * 16) / 5;
for (let i = 1; i < 6; i++) {
this.data.timeList.push(getNowTime(paragraph * i));
console.log('paragraph',this.data.timeList)
}
Object.assign(this.data, {
endTime: this.endTime,
startTime: this.startTime
});
if (this.ffVideo.frames.length) {
this.videoFrames = this.ffVideo.frames;
} else {
this.getVideoFrames();
}
},
methods: {
onplay() {
let myVideo = document.getElementById("videoPlayer"),
{
startTime, endTime } = this.data;
// 开始秒数
let startM =
(dateStrChangeTimeTamp(
"1970-01-02 " +
(this.data.startTime ? this.data.startTime : this.spliterStartTime)
) -
1000 * 60 * 60 * 16) /
1000;
// 结束秒数
let endM =
(dateStrChangeTimeTamp(
"1970-01-02 " +
(this.data.endTime ? this.data.endTime : this.spliterEndTime)
) -
1000 * 60 * 60 * 16) /
1000;
// 如果当前秒数小于等于截取的开始时间,就按截取的开始时间播放,如果不是,则为继续播放
if (myVideo.currentTime <= startM || myVideo.currentTime > endM) {
myVideo.currentTime = startM;
myVideo.play();
}
},
// 获取视频播放时长
getVideoTime() {
let videoPlayer = document.getElementById("videoPlayer");
if (videoPlayer) {
videoPlayer.addEventListener(
"timeupdate",
() => {
// 结束秒数
let endM =
(dateStrChangeTimeTamp(
"1970-01-02 " +
(this.data.endTime ? this.data.endTime : this.spliterEndTime)
) -
1000 * 60 * 60 * 16) /
1000;
// 如果当前播放时间大于等于截取的结束秒数,就暂停
if (videoPlayer.currentTime >= endM) {
videoPlayer.pause();
}
},
false
);
}
},
//设置播放点
playBySeconds(num) {
if (num && document.getElementById("videoPlayer")) {
let myVideo = document.getElementById("videoPlayer");
myVideo.currentTime = num;
}
},
// 起始按钮
startMouseDown(e) {
let odiv = e.currentTarget; //获取目标父元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = e => {
let {
clientWidth, offsetLeft } = this.$refs.start;
//鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
//移动当前元素
odiv.style.left = left + "px";
//获取距离窗口宽度
let mas = odiv.offsetLeft;
if (mas <= -(clientWidth / 2)) {
odiv.style.left = -(clientWidth / 2) + "px";
} else if (
mas >=
this.data.endLeft - Math.ceil(1000 / this.data.roal)
) {
odiv.style.left =
this.data.endLeft - Math.ceil(1000 / this.data.roal) + "px";
}
this.data.startTime = getNowTime(
this.data.roal * Math.floor(offsetLeft + clientWidth / 2)
);
this.data.startLeft = clientWidth + offsetLeft;
// 开始秒数
let startM =
(dateStrChangeTimeTamp(
"1970-01-02 " +
(this.data.startTime
? this.data.startTime
: this.spliterStartTime)
) -
1000 * 60 * 60 * 16) /
1000;
this.playBySeconds(startM);
};
document.onmouseup = e => {
document.onmousemove = null;
document.onmouseup = null;
this.handleTime();
};
},
// 结束按钮
endMouseDown(e) {
let odiv = e.currentTarget; //获取目标父元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
document.onmousemove = e => {
//鼠标按下并移动的事件
let {
clientWidth, offsetLeft } = this.$refs.end;
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
//移动当前元素
odiv.style.left = left + "px";
//获取距离窗口宽度
let mas = odiv.offsetLeft;
if (
mas <=
this.data.startLeft - clientWidth + Math.ceil(1000 / this.data.roal)
) {
odiv.style.left =
this.data.startLeft -
clientWidth +
Math.ceil(1000 / this.data.roal) +
"px";
// console.log(22222)
} else if (mas >= this.data.endright) {
odiv.style.left = this.data.endright + "px";
// console.log(33333)
}
this.data.endTime = getNowTime(
this.data.roal * Math.floor(offsetLeft + clientWidth / 2)
);
this.data.endLeft = offsetLeft;
};
document.onmouseup = e => {
document.onmousemove = null;
document.onmouseup = null;
this.handleTime();
};
},
// 传出起止时间的回调
handleTime() {
let arr = [this.data.startTime, this.data.endTime];
this.$emit("queryTime", arr);
},
onSureCut() {
this.$emit("sure", [this.data.startTime, this.data.endTime]);
},
onCancel() {
this.$emit("cancel");
},
// 上传视频后解析视频帧
async getVideoFrames() {
try {
let {
name, file, duration } = this.ffVideo;
ffmpeg.FS("writeFile", name, await fetchFile(file));
// 计算每秒需要抽的帧数
let step = Math.ceil(20 / duration),
allNum = Math.floor(step * duration);
console.log("step", step, allNum);
await ffmpeg.run(
"-i",
name,
"-r",
`${
step}`,
"-ss",
"0",
"-vframes",
`${
allNum}`,
"-f",
"image2",
"-s",
"88*50",
"image-%02d.png"
);
// ffmpeg -i 2.mp4 -r 1 -ss 0 -vframes 5 -f image2 -s 352x240 image-%02d.jpeg
for (let i = 0; i < allNum; i++) {
// await ffmpeg.run('-i', 'source.mp4', '-y', '-f', '-ss', averageDura * i, '1', 'frame.png')
let temp = i + 1;
if (temp < 10) {
temp = "0" + temp;
}
this.videoFrames.push(
arrayBufferToBase64(ffmpeg.FS("readFile", "image-" + temp + ".png"))
);
}
this.$emit("frame", this.videoFrames);
} catch (err) {
}
},
}
};
</script>
<style scoped lang="scss">
.cut-video {
.video {
height: calc(100vh - 250px);
object-fit: contain;
margin-bottom: 0.2rem;
}
.time-list {
width: 100%;
color: #c0c0c0;
font-size: 0.12rem;
margin-bottom: 0.1rem;
display: flex;
align-items: center;
justify-content: space-between;
// display: none;
margin-bottom: 10px;
}
.crop-filter {
height: 60px;
width: 100%;
padding: 0 0.1rem;
box-sizing: border-box;
display: flex;
align-items: center;
.timer-shaft {
width: 100%;
height: 100%;
position: relative;
.circle {
width: 0.2rem;
position: absolute;
top: -5%;
height: 110%;
background-color: #ffffff;
cursor: e-resize;
display: flex;
align-items: center;
justify-content: center;
.center {
width: 0.02rem;
height: 0.15rem;
background-color: #d8d8d8;
}
}
.strat-circle {
left: -0.09rem;
border-radius: 0.03rem 0 0 0.03rem;
}
.end-circle {
right: -0.1rem;
border-radius: 0 0.03rem 0.03rem 0;
}
.white-shade {
position: absolute;
top: -8%;
height: 110%;
width: 100%;
background-color: transparent;
border: 0.04rem solid #fff;
box-sizing: border-box;
border-left: 0;
border-right: 0;
}
.left-shade {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.right-shade {
position: absolute;
right: 0;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
}
}
> .flex {
justify-content: flex-end;
margin-top: 20px;
}
.frames {
user-select: none;
height: 100%;
object-fit: cover;
// &:hover {
// object-fit: contain;
// width: 100px !important;
// position: absolute;
// top: -60px;
// // height: 100% !important;
// }
}
button {
// background: hsl(0, 0%, 85%);
color: #000;
}
}
</style>
父组件
<template>
<div class="container">
<input type="up" />
<input class="file-li-file" type="file" accept="video/*" @change="uploadVideo" />
<!-- <video :src="videoUrl2" v-if="videoUrl2" controls style="width:400px;object-fit:contain"></video> -->
<cut-video
v-if="cut.show"
:url="ff.videoUrl"
:startTime="cut.startTime"
:endTime="cut.endTime"
:spliterEndTime="cut.spliterEndTime"
:ffVideo="ff"
@sure="onSureCut"
@cancel="cut.show=false"
@frame="onVideoFrame"
/>
原视频
<video
:src="ff.videoUrl"
v-if="ff.videoUrl"
controls
style="width:400px;object-fit:contain;border:2px solid #fff"
/>
减后视频
<video
:src="ff.newVideoUrl"
v-if="ff.newVideoUrl"
controls
style="width:400px;object-fit:contain;border:2px solid #00f"
/>
</div>
</template>
<script>
import cutVideo from "@/components/cutVideo";
import checkSize from "@/utils/upload";
import FFmpeg from "@ffmpeg/ffmpeg";
const {
createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({
log: false });
console.log("ffmpeg", ffmpeg, ffmpeg.isLoaded());
if (!ffmpeg.isLoaded()) {
ffmpeg.load().catch(err => {
console.log(err);
});
}
export default {
components: {
cutVideo },
data() {
return {
// videoUrl2: "",
// videoName: "",
// orgFileBuffer: "",
// TEM_FILE_NAME: "newVideo.mp4",
ff: {
name: "",
file: null,
newName: "newVideo.mp4",
videoUrl: "",
newVideoUrl: "",
blob: null,
frames: [],
duration: 0
},
cut: {
spliterEndTime: "00:00:08.0",
imgs: new Array(20),
startTime: "00:00:00.0",
endTime: "00:00:08.0",
show: false,
duration: 0
}
};
},
methods: {
async uploadVideo(e) {
let file = e.target.files[0],
{
name } = file,
orgFileBuffer = await file.arrayBuffer(); // 获取文件数据
ffmpeg.FS("writeFile", name, await fetchFile(new Blob([orgFileBuffer]))); // 将视频数据写入内存
let videoUrl = URL.createObjectURL(new Blob([orgFileBuffer])); // 将视频数据转为url
let {
duration } = await checkSize(e.target.files);
console.log("uploadVideo", file, duration);
Object.assign(this.ff, {
videoUrl,
name,
file,
duration,
frames: []
});
this.$nextTick(() => {
this.cut.show = true;
});
return {
name, videoUrl };
},
async onSureCut(e) {
let startTime = this.time_to_sec(e[0]),
endTime = this.time_to_sec(e[1]);
try {
// showLoading();
let {
name, newName } = this.ff;
await ffmpeg.run(
"-ss",
`${
startTime}`,
"-t",
`${
endTime - startTime}`,
"-i",
name,
"-vcodec",
"copy",
"-acodec",
"copy",
newName
);
let arrayBuffer = ffmpeg.FS("readFile", newName).buffer; // 读取缓存
let blob = new Blob([arrayBuffer]);
this.ff.newVideoUrl = URL.createObjectURL(blob); // 转为Blob URL
this.ff.blob = blob; //上传文件用
// this.cut.show = false;
// hideLoading();
} catch (err) {
// console.log("切视频err", err);
throw err;
}
},
onVideoFrame(e) {
this.ff.frames = e;
},
time_to_sec(time) {
let hour = time.split(":")[0],
min = time.split(":")[1],
sec = time.split(":")[2],
s = Number(hour * 3600) + Number(min * 60) + Number(sec);
return s;
}
}
};
</script>
<style >
body {
background: #000;
}
* {
color: #fff;
font-size: 12px;
}
</style>
被引用的文件和方法
arrayBufferToBase64.js
function arrayBufferToBase64(array) {
array = new Uint8Array(array);
var length = array.byteLength;
var table = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/'];
var base64Str = "";
for (var i = 0; length - i >= 3; i += 3) {
var num1 = array[i];
var num2 = array[i + 1];
var num3 = array[i + 2];
base64Str +=
table[num1 >>> 2] +
table[((num1 & 0b11) << 4) | (num2 >>> 4)] +
table[((num2 & 0b1111) << 2) | (num3 >>> 6)] +
table[num3 & 0b111111];
}
var lastByte = length - i;
if (lastByte === 1) {
var lastNum1 = array[i];
base64Str +=
table[lastNum1 >>> 2] + table[(lastNum1 & 0b11) << 4] + "==";
} else if (lastByte === 2) {
// eslint-disable-next-line no-redeclare
var lastNum1 = array[i];
var lastNum2 = array[i + 1];
base64Str +=
table[lastNum1 >>> 2] +
table[((lastNum1 & 0b11) << 4) | (lastNum2 >>> 4)] +
table[(lastNum2 & 0b1111) << 2] +
"=";
}
return base64Str;
}
export default arrayBufferToBase64;
cutVideo.js
//日期字符串转成时间戳
function dateStrChangeTimeTamp(dateStr) {
dateStr = dateStr.substring(0, 23);
dateStr = dateStr.replace(/-/g, '/');
let timeTamp = new Date(dateStr).getTime();
return timeTamp
}
// 精准到毫秒
function getNowTime(val) {
const date = new Date(val)
const hour = (date.getHours() - 8) < 10 ? '0' + (date.getHours() - 8) : date.getHours() - 8
const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
const milliSeconds = date.getMilliseconds() //毫秒
const currentTime = hour + ':' + minute + ':' + second + '.' + milliSeconds
// console.log(currentTime, val)
return currentTime
}
export {
dateStrChangeTimeTamp,getNowTime}
upload.js
// 获取最大公约数
function getGcd(a, b) {
let n1, n2;
if (a > b) {
n1 = a;
n2 = b;
} else {
n1 = b;
n2 = a;
}
let remainder = n1 % n2;
if (remainder === 0) {
return n2;
} else {
return getGcd(n2, remainder)
}
}
// 创建虚拟dom 并且放回对应的值
let checkSize = async(files, isVideo) => {
if (!files || !files[0]) return false
const checktimevideo = document.getElementById('checktimevideo')
if (checktimevideo) {
document.body.removeChild(checktimevideo)
}
let doms
if (!isVideo) {
doms = document.createElement('video')
} else {
doms = document.createElement('audio')
}
const url = URL.createObjectURL(files[0])
console.log(url)
doms.src = url
doms.id = 'checktimevideo'
doms.style.display = 'none'
document.body.appendChild(doms)
return await gettime(doms);
}
let gettime = (doms) => {
// 由于loadedmetadata 是异步代码所以需要promise进行封装转换为同步代码执行
const promise = new Promise(resolve => {
doms.addEventListener('loadedmetadata', e => {
const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);
// console.log(gcd)
let obj = {
width: doms.videoWidth, // 尺寸宽 --- 分辨率
height: doms.videoHeight, // 尺寸高
duration: Number(e.target.duration.toFixed(2)), // 视频时长 1表示一秒
ccbl: [e.target.videoWidth / gcd, e.target.videoHeight / gcd] // 计算尺寸比例
}
resolve(obj)
})
})
return promise
}
export default checkSize
参考博文:
在浏览器中使用 FFmpeg:http://www.easyremember.cn/post/312e8a3d.html
vue3+ts实现视频根据时间轴截取:https://blog.csdn.net/wed2019/article/details/126995825
利用ffmpeg实现纯前端视频剪切:https://www.cnblogs.com/my-wl/p/16858178.html