使用Video.js进行视视频的播放_前端视频播放js

作者：知新_RL | 2024-02-13 08:50:24

踩

前端视频播放js

前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot文件页面</title>
</head>
<body>

<video class="box" align="center" controls="controls" width="350px" heigth="350px" autoplay="autoplay">
    <source src="http://localhost:8087/demo/video" type="video/mp4" class="">
</video>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

后端代码
@GetMapping("/video")
    public String video(HttpServletRequest request , HttpServletResponse response) throws Exception {
        File file = new File("D:\\资料\\接着奏乐,接着舞.mp4");
        //读取指定路径下面的视频
        InputStream in = new FileInputStream(file);
        OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
        //创建存放视频内容的数组
        byte[] buff =new byte[1024];
        //所读取的内容使用n来接收
        int n;
        //当没有读取完时,继续读取,循环
        while((n=in.read(buff))!=-1){
            //将字节数组的数据全部写入到输出流中
            outputStream.write(buff,0,n);
        }
        //强制将缓存区的数据进行输出
        outputStream.flush();
        //关流
        outputStream.close();
        in.close();
        return "ok";
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

npm i video.js 执行命令


main.js中添加
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;
1
2
3
4
5
6
7

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/79535