浏览器点击链接就出现播放,我想利用前端vue,让其播放视频,怎么做?
javascript
//播放视频
viewVideo(row, type) {
console.log("row=", row);
console.log("totalBatch=", row.totalBatch, "idNumber", row.idNumber, "batchName=", row.batchName);
let videoName = row.batchName + "_" + row.idNumber + "_" + type;
let videoUrl = row.totalBatch + "/" + videoName + ".mp4";
let url = "http://192.168.16.119:82/" + videoUrl;
url = "http://192.168.16.119:82/1765267861926932482/10_511181200207095213_3.mp4"
// 在新标签页中打开视频
let newTab = window.open();
newTab.document.write(`
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #000; /* 设置背景色为黑色 */
}
video {
width: auto;
height: 100vh; /* 设置视频高度为整个屏幕的高度 */
display: block;
}
</style>
</head>
<body>
<video controls autoplay>
<source src="${url}" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
`);
另外附带nginx的配置
javascript
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
# HTTP模块配置段
http {
# 防DDoS配置
limit_req_zone $binary_remote_addr zone=ddos:10m rate=10r/s;
# 日志配置
access_log /var/log/nginx/access.log;
server {
listen 8090;
server_name 192.168.16.119;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# 设置服务器块
server {
listen 82;
server_name 192.168.16.119;
charset utf-8,gbk;
root /home/nginx/www/images/; # 你的文件目录
# 显示目录,默认不开启
autoindex on;
# 显示文件大小
# 显示文件修改时间
autoindex_localtime on;
location ~ \.mp4$ {
mp4; # 支持mp4
mp4_buffer_size 1m;
mp4_max_buffer_size 10m;
}
}
}