梗概:在做视频播放的功能时,我想实现用axios来给后端传id的方式来播放对应的视频(我的视频是存在本地的,如果用服务器的话应该也差不多吧。。)
首先的第一步是获得数据库所存储的所有视频信息并展示,也就是写一个findAllVideo接口来实现,不过极力推荐使用mybatis-plus很方便。查找后的界面大概是这样:
这个组件和视频播放组件二者不存在路由关系,所以两者是兄弟组件,所以使用兄弟组件的传值方式,在这里我用的是<router-link></router-link>标签的方式进行传值的,因为可以写一个观看视频来进行点击跳转到兄弟界面。
<router-link :to="{path:'/first_video',query:{userid: fit.id}}">观看视频</router-link>
下面是该组件的script,改界面实现勇哥v-for循环就ok。
export default ({
name: "video_main",
data(){
return{
param:{
movie:[{
id: 0,
name: '',
director: '',
pub_date: '',
time_length: '',
rating: 0.0,
description: '',
categories: [],
file: '',
pic: ''
}]
}
}
},
created() {
this.$http.get("http://localhost:8081/movie/findAll")
.then(res=>{
this.param.movie=res.data;
})
},
然后跳转到视频播放组件后,我是在created里面接受的值,使用了(其实不用转成int,但我懒得改了)
this.id = parseInt(this.$route.query.userid);
然后我们看video标签,这里最重要的是看src标签,在这里我们返回后端并且传了id,
playerOptions这个属性我直接copy的那个叫vue-play的属性,写的还是挺好看的。
<video controls :src="playerOptions.sources.src"/>
data() {
return {
id: Number,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4", // 类型
src: 'http://localhost:8081/file/video/', // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
},
然后接着在create()写这样我们就能把接受到的id返回给数据了。
created() {
this.id = parseInt(this.$route.query.userid);//黄色
console.log(this.id)
this.playerOptions.sources.src = 'http://localhost:8081/file/video/'+this.id
前端写完了我们回头看后端:(注意一定要在controller加上@CrossOrigin注解,要不然跨域失败,不过如果你写了api代理的话就无所谓了)。在后端里我们单独写一个String id就获得了,然后在realpath里写上id就ok
!!!!注意一定要是mp4格式的视频才能播放哦!!!!!
@GetMapping("/video/{id}")
public void videoPreview(@PathVariable("id") String id,HttpServletRequest request, HttpServletResponse response) throws Exception {
String sourcePath = ClassUtils.getDefaultClassLoader().getResource("").getPath().substring(1);
String realPath = sourcePath +"static/video/"+id+".mp4";
System.out.println(realPath);
Path filePath = Paths.get(realPath);
if (Files.exists(filePath)) {
String mimeType = Files.probeContentType(filePath);
if (!StringUtils.isEmpty(mimeType)) {
response.setContentType(mimeType);
}
request.setAttribute(NonStaticResourceHttpRequestHandler.ATTR_FILE, filePath);
nonStaticResourceHttpRequestHandler.handleRequest(request, response);
} else {
response.setStatus(HttpServletResponse.SC_NOT_FOUND);
response.setCharacterEncoding(StandardCharsets.UTF_8.toString());
}
}
最后就能成功播放视频了。
参考:
版权声明:本文为CSDN博主「sJLei_38759449」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_38759449/article/details/104496464
版权声明:本文为CSDN博主「木蓝茶陌*_*」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/jyn15159/article/details/108991713