【项目】UniApp实战多端企业网盘全栈开发 23 视频播放功能实现

雨点打透心脏的1/2处 2024-03-22 15:26 39阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  23 视频播放功能实现

![在这里插入图片描述][bc8dd2e12ff64c0c9cdebac250cf0e56.png_pic_center]

##### 23 视频播放功能实现 #####

新建一个专门用于视频播放的页面 `video.vue`

![在这里插入图片描述][0dc8b7ce0b694bc285045ccffa06af57.png_pic_center]

<template>
    	<view style="height: 100vh;">
    		<video :src="url" controls autoplay style="width: 750rpx; height: 100vh;" @ended="back"></video>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				url: ""
    			}
    		},
    		onLoad(e) {
    			if (!e.url) {
    				uni.showToast({
    					title: '非法参数',
    					icon: 'none'
    				});
    				return uni.navigateBack({
    					delta: 1
    				});
    			}
    			this.url = e.url
    		},
    		methods: {
    			back() {
    				uni.navigateBack({
    					delta: 1
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

修改首页点击跳转

先小改一下数据，当然这里只是测试功能，随便插了个笔者七牛云里面的视频

{
        
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						data: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},

case 'video':
    						uni.navigateTo({
        
    							url: '../video/video?url=' + item.data
    						});
    						break;

试试

这里这个视频得是h.264 编码格式的，不然放不出来

这里用到老师给的一个视频

效果是下面这样的

![在这里插入图片描述][674be49b2cf8490e9ab76e30abcc4ab5.gif_pic_center]

没问题，当然我们也可以把标题也拿过来

![在这里插入图片描述][ac0e88f7795f405abafe5a0a3dfba410.png_pic_center]

然后在接收时

![在这里插入图片描述][fafa25d965a246a1a20c94a2c7f89904.png_pic_center]

看看效果

![在这里插入图片描述][ccc444e63e2d4f06bf2d13ccca9519e8.png_pic_center]

没问题，真机是下面这样的

![在这里插入图片描述][b68cf6f2eedd4930a7517f89509f4344.png_pic_center]

没问题。而且播放完毕后，会自动回到首页

[bc8dd2e12ff64c0c9cdebac250cf0e56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e61d4d75d05144aab11ccd0f25ddc1a9.png
[0dc8b7ce0b694bc285045ccffa06af57.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1134fa2b082043d6ae963e885a2d8468.png
[674be49b2cf8490e9ab76e30abcc4ab5.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5ed1d08f45bb4b5da937710080c167e5.png
[ac0e88f7795f405abafe5a0a3dfba410.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cdd16647e9164aba96b8f870d6c8e9c6.png
[fafa25d965a246a1a20c94a2c7f89904.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/835aa0808a6f43c5bfaa296532f85992.png
[ccc444e63e2d4f06bf2d13ccca9519e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7915540b8d74443e87f991a60ea7ec62.png
[b68cf6f2eedd4930a7517f89509f4344.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8506c7ad82b94f3ca1f47bf0356338bf.png