DigitalHuman-app/pages/list/playVideo/playVideo.vue

<template>
	<view class="video-player-container">
		<view>
			<video class="video-player" controls @play.prevent id="myVideo"
				src="@/static/videos/86e914d805fe8578f8258d21eeac7ddc.mp4" @error="videoErrorCallback"></video>
		</view>
		<view class="icon-area">
			<uni-icons type="download-filled" size="30" color="#BD3124" @click="downloadVideo"></uni-icons>
			<uni-icons type="redo-filled" size="30" color="#BD3124" @click="shareToggle"></uni-icons>
		</view>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<view class="popup-content">
				<text class="text">分享到</text>
				<view class="app-icon">
					<view class="app-icon-item" @click="shareWeibo">
						<image class="app-icon-img" src="@/static/images/xijiao/weibo.png"></image>
						<view class="app-icon-text">
							新浪微博
						</view>
					</view>
					<view class="app-icon-item" @click="shareWechat">
						<image class="app-icon-img" src="@/static/images/xijiao/WeChat.png"></image>
						<view class="app-icon-text">
							微信
						</view>
					</view>
					<view class="app-icon-item" @click="shareTimeline">
						<image class="app-icon-img" src="@/static/images/xijiao/timeline.png"></image>
						<view class="app-icon-text">
							朋友圈
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading:false,
			}
		},
		methods: {
			downloadVideo() {
				uni.showToast({
					title: "下载中",
					icon: "loading",
					duration:100000
				})
				uni.downloadFile({
					url: 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4', 
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							uni.hideToast()
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath
							})
							uni.showToast({
								title: "下载成功",
								icon: "success"
							})
						}else{
							uni.showToast({
								title: "下载失败",
								icon: "error"
							})
						}
					}
				});
				/* uni.downloadFile({
					url: "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath
							})
							// 提示用户下载成功
							uni.showToast({
								title: "下载成功",
								icon: "success"
							});
						}
						else {
							uni.showToast({
								title: "资源格式错误，请联系管理员"
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: "下载失败",
							icon:'error'
						})
					}
				}) */
			},
			shareToggle() {
				this.$refs.share.open()
			},
			shareWeibo() {
				uni.share({
					provider: "sinaweibo",
					type: 4,
					mediaUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareWechat() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 4,
					mediaUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareTimeline() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 4,
					mediaUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-player-container {
		.video-player {
			width: 100%;
			height: 300px;
		}

		.icon-area {
			display: flex;
			justify-content: space-evenly;
			margin-top: 50px;
		}

		.popup-content {
			width: 100%;
			height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.text {
				margin: 10px 0;
				font-size: 20px;
			}

			.app-icon {
				display: flex;
				justify-content: space-between;
				margin: 10px 0;

				.app-icon-item {
					width: 100px;
					display: flex;
					flex-direction: column;
					align-items: center;

					.app-icon-img {
						width: 30px;
						height: 30px;
					}

					.app-icon-text {
						margin-top: 10px;
						text-align: center;
					}
				}

			}

		}
	}
</style>