视频播放

src/api/assistingAgriculture/village.js

@@ -40,3 +40,11 @@ export function screeningConditions(data) {
     data,
   });
 }
+// 视频
+export function streamList(data) {
+  return request({
+    url: `/sgyrdd/znprod/tour/streamList`,
+    method: 'GET',
+    data,
+  });
+}

src/pages/assistingAgriculture/RuralTravel/RuralTravel.vue

@@ -54,11 +54,22 @@
             src="/static/assistingAgriculture/rural/dayTOur.png"
             style="width: 32rpx; height: 32rpx"
           />
-          <img
-            class="spe-img"
-            src="/static/assistingAgriculture/rural/img5.png"
-            style="width: 306rpx; height: 204rpx"
-          />
+          <video
+            class="spe-img1"
+            id="videoId"
+            :src="videoList[0].videoUrl"
+            @error="videoErrorCallback"
+            :danmu-list="danmuList"
+            enable-danmu
+            danmu-btn
+            @play="play"
+            @fullscreenchange="fullscreenchange"
+          ></video>
+          <!--          <img-->
+          <!--            class="spe-img"-->
+          <!--            src="/static/assistingAgriculture/rural/img5.png"-->
+          <!--            style="width: 306rpx; height: 204rpx"-->
+          <!--          />-->
         </view>
       </view>
       <view class="hot-way">
@@ -189,14 +200,15 @@ import Sort from '../../../components/assistingAgriculture/index/Sort.vue';
 import DepartureDate from '../../../components/assistingAgriculture/index/DepartureDate.vue';
 import ScenicSpots from '../../../components/assistingAgriculture/index/ScenicSpots.vue';
 import Screen from '../../../components/assistingAgriculture/index/Screen.vue';
-import { getPopularList, getProdList, getTour } from '@/api/assistingAgriculture/village';
+import {
+  getPopularList,
+  getProdList,
+  getTour,
+  streamList,
+} from '@/api/assistingAgriculture/village';
 import { getPresaleList } from '@/api/assistingAgriculture/building';
 import { onMounted, ref } from 'vue';
 import fab from '../../../components/fab/fab.vue';
-onMounted(async () => {
-  getProd();
-  getPopular();
-});
 const rotate = ref(false);
 const rotate2 = ref(false);
 const rotate3 = ref(false);
@@ -217,6 +229,7 @@ const scenicSpotsRef = ref(null);
 const screenRef = ref(null);
 const backgroundBox = ref('');
 const border = ref('');
+const videoList = ref([]);
 
 const locationFiltering = (index) => {
   switch (index) {
@@ -254,6 +267,12 @@ const locationFiltering = (index) => {
     forPeopleList.value = [];
   }
 };
+const videoContext = ref(null);
+onMounted(async () => {
+  getProd();
+  getPopular();
+  getStreamList();
+});
 onPullDownRefresh(() => {
   keyword.value = '';
   getProd();
@@ -270,6 +289,34 @@ const getPopular = () => {
     popularRouterData.value = res.data.records;
   });
 };
+// 查询视频列表
+const getStreamList = () => {
+  streamList().then((res) => {
+    res.data.forEach((item) => {
+      item.videoUrl = import.meta.env.VITE_APP_IMG_URL + '/pig/' + item.videoUrl;
+    });
+    videoList.value = res.data;
+    console.log(videoList.value, 121);
+  });
+};
+// 播放时进入全屏
+function play(index) {
+  const videoContext = uni.createVideoContext('videoId');
+  videoContext.requestFullScreen();
+}
+
+// 退出全屏时暂停
+function fullscreenchange(e) {
+  if (!e.detail.fullScreen) {
+    uni.createVideoContext('videoId').pause();
+  }
+}
+// //退出全屏时停止
+// function fullscreenchange (e){
+//   if(!e.detail.fullScreen){
+//     videoContext.stop()
+//   }
+// };
 // 智能排序
 const sortParams = (sortMode) => {
   sortType.value = sortMode;
@@ -287,11 +334,6 @@ const dataParams = (item, datePart) => {
   }
 };
 // 景点
-// const placeParams = (item) => {
-//   console.log(item, 222);
-//   attractionIdList.value = item.id;
-//   getProd();
-// };
 const placeParams = (item) => {
   const ids = item.map((i) => i.id);
   const arr = ids.join(',');
@@ -660,4 +702,23 @@ page {
   position: absolute;
   margin-top: 140rpx;
 }
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+uni-video {
+  width: 300rpx;
+  height: 200rpx;
+  top: 10rpx;
+  left: 20rpx;
+  border-radius: 16rpx;
+}
 </style>