1***@qq.com
1***@qq.com
  • 发布:2021-02-04 14:48
  • 更新:2021-02-04 15:27
  • 阅读:806

【报Bug】IOS视频全屏播放,APP会横屏,有声音,但没图像,安卓正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.0.7

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphone7

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view>  
    <view class="userCard">  
      <view class="header">  
        <view  
          class="avatar"  
          @click="toStore"  
        >  
          <simage  
            :src="avatarUrl"  
            width="80rpx"  
            shape="circle"  
            height="80rpx"  
          ></simage>  
        </view>  
        <view class="right ">  
          <view  
            class="userInfo"  
            @click="toStore"  
          >  
            <view class="top"><text  
                class="bigTag"  
                v-if="bigTag"  
              >{{bigTag}}</text><text>{{userId===0?'高桥大市场':nickname}}</text></view>  
            <view class="bottom">  
              <view  
                class="level"  
                v-for="item in level"  
                :key="item"  
              ></view>  
              <view  
                v-if="level||level&&otherTags.length"  
                style="width:2rpx;border:1rpx solid #ccc;height:28rpx;"  
              ></view>  
              <text  
                class="otherTag"  
                v-for="(otherTag, i) in otherTagArr"  
                :key="i"  
              >{{otherTag}}</text>  
            </view>  
          </view>  

          <view  
            class="button"  
            v-if="!cardType"  
          >  
            <button  
              v-if="!concerned"  
              @click="follow"  
              class="operateBtn"  
            >关注</button>  
            <button  
              v-else  
              @click="toStore"  
              class="operateBtnActive"  
            >进店</button>  
          </view>  
          <view  
            class="button"  
            v-else-if="cardType==='collection'"  
          >  
            <view  
              v-if="collected"  
              class="icon iconCollected"  
              @click="cancelCollect"  
            ></view>  
            <view  
              v-else  
              class="icon iconCollect"  
              @click="collect"  
            ></view>  

          </view>  
          <view  
            class="button"  
            v-else-if="cardType==='concern'"  
          >  
            <button  
              v-if="!concerned"  
              @click="follow"  
              class="operateBtn"  
            >关注</button>  
            <button  
              v-else  
              @click="cancelConcern"  
              class="operateBtnActive"  
            >取消关注</button>  

          </view>  
          <view  
            class="button"  
            v-else-if="cardType==='authorized'"  
          >  
            <button  
              v-if="authorized"  
              class="operateBtn"  
              @click="cancelAuthorized"  
            >取消授权</button>  
            <button  
              v-else  
              class="operateBtnActive"  
              @click="toStore"  
            >进店</button>  
          </view>  
          <view  
            class="button"  
            v-else-if="cardType==='homeCard'&&closable"  
          >  
            <view  
              class="icon iconClose"  
              @click.stop="closeItem"  
            ></view>  
          </view>  
        </view>  

      </view>  
      <view @click="toDynamic">  
        <text  
          class="title"  
          v-if="title"  
        >{{title}}</text>  
        <view class="content">  
          {{content}}  
        </view>  
      </view>  
      <view  
        class="pics"  
        v-if="pics&&pics.length>0"  
      >  
        <simage  
          v-for="(pic, i) in images"  
          :key="i"  
          class="image"  
          width="226rpx"  
          height="226rpx"  
          :src="pic"  
          @click.native.stop="previewImgs(images,i)"  
        ></simage>  
      </view>  
      <!-- #ifdef APP-PLUS -->  
        <view  
          class="video"  
          v-else  
        >  
          <view style="position: relative; background-color: #000000;"@click="palyVideo()">  
              <image :src="BaseHost+poster"  
              :lazy-load="true"  
              style="width: 100%;height: 320rpx;"  
              mode="aspectFill"  
              >    
              </image>  
              <image :src="BaseHost+'/static/image/paly.png'"   
              :lazy-load="true"  
              mode="scaleToFill"  
              class="play-icon"  
              ></image>  
          </view>  
          <video  
            class="video-content"  
            :id="`videoItem${itemId}`"  
            :enable-play-gesture="true"  
            :src="BaseHost+video"  
            :poster="poster?BaseHost+poster:''"  
            @fullscreenchange="fullScreen"  
            controls  
          ></video>  
        </view>  
      <!-- #endif -->  
      <view  
        class="tags"  
        v-if="tags.length>0"  
      >  
        <text  
          class="tag"  
          v-for="(tag, i) in tags"  
          :key="i"  
        >{{tag}}</text>  
      </view>  
      <view  
        class="operate"  
        v-if="operate"  
      >  
        <!-- <view  
          class="button"  
          @click="forward()"  
        >  
          <view class="icon iconForward"></view>  
          <view>{{forwardCount}}</view>  
        </view> -->  
        <view  
          class="button"  
          @click="toDynamic()"  
        >  
          <view class="icon iconComment"></view>  
          <view>{{commentCount}}</view>  
        </view>  
        <view  
          class="button"  
          @click="like()"  
        >  
          <view  
            class="icon iconLiked"  
            v-show="isPraised"  
          ></view>  
          <view  
            v-show="!isPraised"  
            class="icon iconLike"  
          ></view>  
          <view>{{likeCount}}</view>  
        </view>  
      </view>  
      <forward  
        class="forward-box"  
        v-if="isForward"  
        @cancel="cancelForward"  
        :dynamicId="itemId"  
        :name="nickname"  
        :mes="content"  
      >  
      </forward>  
    </view>  
    <view class="division"></view>  
  </view>  

</template>  
<script>  
import { previewImg } from "../../utils/index";  
import { BaseHost, SourceType,GqAvatar } from "../../utils/const";  
import Forward from "../../pages/components/forward";  
import { CURRENT_NEWS } from "../../store/type";  
export default {  
  components: {  
    Forward  
  },  
  props: {  
    sourceObj: {  
      type: Object,  
      default: null  
    },  
    level:{  
      type:Number,  
      default:0  
    },  
    poster:{  
      type:String,  
      default:""  
    },  
    mine: {  
      type: Boolean,  
      default: false  
    },  
    operate: {  
      type: Boolean,  
      default: true  
    },  
    sourceType: {  
      type: Number,  
      default: SourceType.news,  
      required: true  
    },  
    end: {  
      type: Boolean,  
      default: false  
    },  
    cardType: {  
      type: String,  
      default: ""  
    },  
    avatar: {  
      type: String,  
      default: ""  
    },  
    isCollect: {  
      type: Boolean,  
      default: true  
    },  
    index: {  
      type: Number,  
      default: 0  
    },  
    itemId: {  
      type: Number,  
      default: 0,  
      required: true  
    },  
    title: {  
      type: String,  
      default: ""  
    },  
    userId: {  
      type: Number,  
      default: 0,  
      required: true  
    },  
    groupId: {  
      type: Number,  
      default: 0  
    },  
    isConcern: {  
      type: Boolean,  
      default: true  
    },  
    pics: {  
      type: Array,  
      default: () => []  
    },  
    video: {  
      type: String,  
      default: ""  
    },  
    content: {  
      type: String,  
      default: ""  
    },  
    bigTag: {  
      type: String,  
      default: ""  
    },  
    forwardCount: {  
      type: Number,  
      default: 0  
    },  
    commentCount: {  
      type: Number,  
      default: 0  
    },  
    praiseCount: {  
      type: Number,  
      default: 0  
    },  
    praised: {  
      type: Boolean,  
      default: false  
    },  
    otherTags: {  
      type: [Array,String],  
      default: () => []  
    },  
    tags: {  
      type: Array,  
      default: () => []  
    },  
    nickname: {  
      type: String,  
      default: ""  
    },  
    newsId: {  
      type: Number,  
      default: 0,  
      required: true  
    },  
    authorized: {  
      type: Boolean,  
      default: false  
    },  
    closable: {  
      type: Boolean,  
      default: false  
    },  
  },  
  computed: {  
    avatarUrl() {  
      return this.userId === 0 ? GqAvatar : this.avatar;  
    },  
    images() {  
      return this.pics ? this.pics.slice(0, 3) : [];  
    },  
    otherTagArr(){  
        return typeof this.otherTags === 'string'?this.otherTags.split(' '):this.otherTags  
    }  
  },  
  data() {  
    return {  
      isPraised: false,  
      likeCount: 0,  
      BaseHost,  
      concerned: false,  
      collected: false,  
      isForward: false,  
      videoContext:null,  
    };  
  },  
  created() {  
    this.isPraised = this.praised;  
    this.likeCount = this.praiseCount;  
  },  
  mounted() {  
      this.$nextTick(()=>{  
          this.videoContext = uni.createVideoContext(`videoItem${this.itemId}`);  
      })  

  },  
  watch: {  
    isCollect:{  
      handler(val){  
        this.collected = val;  
      },  
      immediate: true  
    },  
    isConcern: {  
      handler(val) {  
        this.concerned = val;  
      },  
      immediate: true  
    }  
  },  
  methods: {  
    closeItem() {  
      this.$emit("addNew");  
    },  
    cancelAuthorized() {  
      uni.showModal({  
        title: "提示",  
        content: "确定要取消对此用户的授权吗?",  
        success: res => {  
          if (res.confirm) {  
            uni.showLoading();  
            this.$u.api  
              .cancelAuthorized({  
                authTo: this.userId  
              })  
              .then(() => {  
                this.$emit("cancelAuthorized", {  
                  userId: this.userId,  
                  index: this.index  
                });  
                    uni.hideLoading();  
              })  
              .finally(() => {  

              });  
          }  
        }  
      });  
    },  
    toStore() {  
      uni.navigateTo({ url: "/pages/dynamic/storeDynamic?id=" + this.userId });  
    },  
    toDynamic() {  
      if (this.mine === true) {  
        uni.navigateTo({  
          url: `/pages/supply/releaseMatchSuccess?id=${this.newsId ||  
            this.itemId}&user_id=${this.userId}`  
        });  
      } else {  
        uni.navigateTo({  
          url: `/pages/dynamic/dynamic?id=${this.newsId ||  
            this.itemId}&group_id=${this.groupId}&source_type=${  
            this.sourceType  
          }`  
        });  
      }  
      if(this.sourceObj){  
        getApp().globalData.currentNews = JSON.parse(JSON.stringify(this.sourceObj));  
      }  
    },  
    collect() {  
      uni.showLoading();  
      this.$u.api  
        .collect({  
          sourceId: this.newsId || this.itemId,  
          sourceType: this.sourceType  
        })  
        .then(res => {  
          if (res.code === 1) {  
            uni.showToast({  
              title: "收藏成功",  
              icon: "none"  
            });  
            this.collected = true;  
                 uni.hideLoading();  
          }  
        })  
        .finally(() => {  

        });  
    },  
    cancelCollect() {  
      uni.showModal({  
        title: "提示",  
        content: "确定要取消此收藏吗?",  
        success: res => {  
          if (res.confirm) {  
            uni.showLoading();  
            this.$u.api  
              .collect({  
                sourceId: this.newsId || this.itemId,  
                sourceType: this.sourceType  
              })  
              .then(res => {  
                if (res.code === 1) {  
                  uni.showToast({  
                    title: "已取消收藏",  
                    icon: "none"  
                  });  
                  this.collected = false;  
                  this.$emit("remove", { index: this.index });  
                }  
              })  
              .finally(() => {  
                // uni.hideLoading();  
              });  
          }  
        }  
      });  
    },  
    palyVideo(){  
        this.videoContext.requestFullScreen();  
        this.videoContext.play();  
    },  
    fullScreen(event){  

        if(event.detail.direction === 'vertical'){  
            this.videoContext.stop();  
        }  
    },  
    cancelConcern() {  
      uni.showLoading({  
        title: "请稍后...."  
      });  
      this.$u.api  
        .concern({  
          userId: this.userId  
        })  
        .then(res => {  
          if (res.code === 1) {  
            uni.showToast({  
              icon: "none",  
              title: "取消成功"  
            });  
            this.concerned = false;  
            this.$emit("remove", {  
              index: this.index  
            });  
          }  
        })  
        .finally(() => {  
          // uni.hideLoading();  
        });  
    },  
    async follow() {  
      uni.showLoading({  
        title: "关注中...."  
      });  
      this.$u.api  
        .concern({  
          userId: this.userId  
        })  
        .then(res => {  
          if (res.code === 1) {  
            uni.showToast({  
              icon: "none",  
              title: "关注成功"  
            });  
            this.concerned = true;  
            this.$emit("concerned", {  
              userId: this.userId  
            });  
          }  
        })  
        .finally(() => {  
          // uni.hideLoading();  
        });  
    },  
    cancelForward() {  
      this.isForward = false;  
    },  
    async like() {  
      this.$u.api  
        .savePraise({  
          sourceId: this.newsId || this.itemId,  
          sourceType: this.sourceType  
        })  
        .then(res => {  
          if (res.code === 1) {  
            this.isPraised = !this.isPraised;  
            if (this.isPraised) {  
              this.likeCount += 1;  
            } else {  
              if(this.likeCount>0){  
                this.likeCount -= 1;  
              }else{  
                this.likeCount = 0;  
              }  
            }  
            this.$emit('updateLike', {  
              praisedCount:this.likeCount,  
              praised:this.isPraised  
            }, this.sourceObj);  
          }  
        });  
    },  
    forward() {  
      this.isForward = true;  
    },  
    previewImgs(pics, index) {  
      previewImg([...pics], index);  
    }  
  }  
};  
</script>  
<style>  
/* .uni-video-cover{  
  z-index:-1;  
} */  
</style>  
<style lang="scss" scoped>  
.video-content {  
  min-height: 320rpx;  
  display: none;  
}  
.userCard {  
  width: 690rpx;  
  padding: 30rpx 30rpx 20rpx;  
  box-sizing: content-box;  
  background-color: #ffffff;  
}  

.title {  
  font-size: 32rpx;  
  font-family: PingFang SC;  
  font-weight: bold;  
  color: #000;  
  line-height: 42rpx;  
}  
.video {  
  width: 100%;  
  height: 320rpx;  
  margin-top: 30rpx;  
  video {  
    width: 100%;  
    height: 320rpx;  
  }  
  .play-icon{  
      width: 80rpx;  
      height: 80rpx;  
      left: 50%;  
      top: 50%;  
      margin-left: -40rpx;  
      margin-top: -40rpx;  
      display: block;  
      position: absolute;  
      z-index: 10;  
  }  
}  
.userInfo {  
  height: 80rpx;  
  font-size: 30rpx;  
  font-family: PingFang SC;  
  font-weight: 400;  
  color: #333333;  
  margin-left: 26rpx;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;  
}  
.bigTag {  
  padding: 0rpx 13rpx;  
  height: 36rpx;  
  background: #fff6eb;  
  border: 1rpx solid #ffd49d;  
  border-radius: 4rpx;  
  font-size: 24rpx;  
  font-family: PingFang SC;  
  font-weight: 400;  
  color: #fe7226;  
  text-align: center;  
  line-height: 36rpx;  
  margin-right: 15rpx;  
  box-sizing: content-box;  
}  
.header {  
  width: 100%;  
  display: flex;  
  align-items: center;  
  margin-bottom: 26rpx;  
  .top {  
    display: flex;  
    font-weight: bold;  
    color: #555;  
    align-items: center;  
  }  
  .bottom {  
    display: flex;  
  }  
  .right {  
    display: flex;  
    width: 100%;  
    justify-content: space-between;  
  }  
}  

.operateBtn {  
  margin-left: auto;  
  height: 45rpx;  
  background: #fe7226;  
  border-radius: 22rpx;  
  min-width: 90rpx;  
  font-size: 24rpx;  
  padding: 0 16rpx;  
  font-family: PingFang SC;  
  font-weight: 400;  
  color: #ffffff;  
  line-height: 45rpx;  
  text-align: center;  
}  
.operateBtnActive {  
  margin-left: auto;  
  height: 45rpx;  
  background-color: #fff;  
  padding: 0 16rpx;  
  border: 1rpx solid #fe7226;  
  border-radius: 22rpx;  
  box-sizing: border-box;  
  min-width: 90rpx;  
  font-size: 24rpx;  
  font-family: PingFang SC;  
  font-weight: 400;  
  color: #fe7226;  
  line-height: 43rpx;  
  text-align: center;  
}  
.level {  
  width: 24rpx;  
  height: 28rpx;  
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA5MzguOTkgNzMxLjQ3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6NTZweDtzdHJva2U6dXJsKCPmnKrlkb3lkI3nmoTmuJDlj5hfMjApO30uY2xzLTJ7ZmlsbDp1cmwoI+acquWRveWQjeeahOa4kOWPmF84KTt9LmNscy0ze2ZpbGw6dXJsKCPmnKrlkb3lkI3nmoTmuJDlj5hfMjAtMik7fS5jbHMtNHtmaWxsOnVybCgj5pyq5ZG95ZCN55qE5riQ5Y+YXzIwLTMpO30uY2xzLTV7Zm9udC1zaXplOjUwMHB4O2ZpbGw6IzAxODNmZTtmb250LWZhbWlseTpBZG9iZVNvbmdTdGQtTGlnaHQtR0JwYy1FVUMtSCwgQWRvYmUgU29uZyBTdGQ7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMjAiIHgxPSI3OTEiIHkxPSI2MTMuNzQiIHgyPSIxNDI0IiB5Mj0iNjEzLjc0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA4MmZmIi8+PHN0b3Agb2Zmc2V0PSIwLjk5IiBzdG9wLWNvbG9yPSIjMjlhYmUyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9IuacquWRveWQjeeahOa4kOWPmF84IiB4MT0iMTM1MyIgeTE9IjkwOSIgeDI9IjEzNTMiIHkyPSI5MDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkOGI1NjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNiYTdiNGQiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0i5pyq5ZG95ZCN55qE5riQ5Y+YXzIwLTIiIHgxPSI5MjIuNzciIHkxPSI0MTYuMjIiIHgyPSIxMzY4IiB5Mj0iNDE2LjIyIiB4bGluazpocmVmPSIj5pyq5ZG95ZCN55qE5riQ5Y+YXzIwIi8+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMjAtMyIgeDE9Ijg0NiIgeTE9IjczNy45NSIgeDI9IjEyOTEuNDkiIHkyPSI3MzcuOTUiIHhsaW5rOmhyZWY9IiPmnKrlkb3lkI3nmoTmuJDlj5hfMjAiLz48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODE5LDI3Nmg1NzdWNjIycy01NCwyNzktMjg4LDMyOWMtNjMtMTAtMjI5LTcxLTI4OS0zMTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzkxIC0yNDgpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTM1Myw5MDkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzY4LDQzNXMtMjkwLTI2MC00NDUsMGMtNywxMSwxNDMtMjM0LDQ0NSw3OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik04ODEsNzM1czI1Ni4xMiwyNDEuMjIsNDEwLjI2LTE5LjNjNy0xMS0xNDIuMjIsMjM0LjQ4LTQ0NS4yNi03Ni41MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48dGV4dCB4PSItNzkxIiB5PSItMjQ4Ii8+PHRleHQgY2xhc3M9ImNscy01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAuMTUgNDk2LjIpIj5TPC90ZXh0Pjwvc3ZnPg==);  
  background-repeat: no-repeat;  
  background-size: cover;  
  margin-left: 1rpx;  
}  
.otherTag {  
  font-size: 22rpx;  
  font-family: PingFang SC;  
  font-weight: 400;  
  color: #b1b1b1;  
  :nth-of-type(n + 1) {  
    margin-right: 20rpx;  
  }  
}  
.pics {  
  width: 100%;  
  height: 226rpx;  
  display: flex;  
  justify-content: flex-start;  
  margin: 18rpx 0rpx 30rpx;  
  .image {  
    width: 226rpx;  
    height: 226rpx;  
    margin: 5rpx 3rpx;  
  }  
}  
.tags {  
  display: flex;  
  margin-top: 18rpx;  
  padding-bottom: 19rpx;  
  flex-wrap: wrap;  
  .tag {  
    margin-right: 12rpx;  
    box-sizing: border-box;  
    padding: 0rpx 20rpx;  
    height: 36rpx;  
    background: #f5f5f5;  
    border-radius: 4px;  
    font-size: 24rpx;  
    font-family: PingFang SC;  
    font-weight: 400;  
    color: rgba(0, 130, 255, 1);  
    text-align: center;  
    line-height: 36rpx;  
  }  
}  
.operate {  
  width: 100%;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  box-sizing: border-box;  
  padding: 20rpx 130rpx 0rpx;  
  border-top: 1rpx solid #f7f7f7;  
  .button {  
    display: flex;  
    align-items: center;  
    font-size: 24rpx;  
    font-family: PingFang SC;  
    color: #555555;  
  }  
}  
.content {  
  margin-top: 21rpx;  
  font-size: 30rpx;  
  font-family: PingFang SC;  
  color: #333333;  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;  
  overflow: hidden;  
}  
.icon {  
  margin-right: 4rpx;  
}  
</style>  

操作步骤:

以上组件,是放在一个新闻动态列表中,为了防止video原生组件遮住其他元素,利用image遮挡它,点击图片后全屏播放

  this.$nextTick(()=>{  
          this.videoContext = uni.createVideoContext(`videoItem${this.itemId}`);  
      })  

palyVideo(){  
        this.videoContext.requestFullScreen();  
        this.videoContext.play();  
    },  
    fullScreen(event){  

        if(event.detail.direction === 'vertical'){  
            this.videoContext.stop();  
        }  
    },

使用此法实现全屏播放,安卓正常,ios有声音无图像

我尝试了打开一个新页面,全屏播放视频,但是底部的控制条不能再操作,这样就不能退回之前的页面

<template>  
  <view>  
    <video  
      id="playVideo"  
      :enable-play-gesture="true"  
      :src="video"  
      :poster="poster?poster:''"  
      @fullscreenchange="fullScreen"  
      controls  
      :autoplay="true"  
    ></video>  
  </view>  
</template>  

<script>  
    import {  
        BaseHost  
    } from "../../utils/const"  
    export default {  
        data() {  
            return {  
                video: '',  
                poster: '',  
                videoContext: null,  
                isFullScreen: false  
            }  
        },  
        onLoad({  
            video,  
            poster  
        }) {  
            this.video = BaseHost+ video;  
            this.poster = BaseHost+ poster;  
        },  
        mounted(){  
        },  
        onShow() {  
            this.$nextTick(() => {  
            this.videoContext = uni.createVideoContext('playVideo');  
            this.videoContext.requestFullScreen();  
            })  
        },  
        methods: {  
            fullScreen(event) {  
                console.log(event)  
                this.isFullScreen = event.detail.fullScreen;  
                if (!this.isFullScreen) {  
                    this.videoContext.stop();  
                    uni.navigateBack();  
                }else{  
                    // this.videoContext.play();  
                }  
            },  
        }  
    }  
</script>  
<style>  
</style>

预期结果:

。。。

实际结果:

。。。

bug描述:

IOS视频全屏播放,APP会横屏,有声音,但没图像,安卓正常,下图附件一张为ios截图,一张为安卓模拟器截图

2021-02-04 14:48 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

用示例代码hello uni-app能出现你的问题吗?
不能的话你需要排查出来具体你哪个页面,甚至哪一行导致的。
找出来具体原因后提供一个能复现你描述的bug的最小化demo,让我们及时定位问题,及时修复。

  • 1***@qq.com (作者)

    我尝试了,当要播放视频是,跳往另一个叫playVideo的页面,来解决这个问题,但是,底部的控制条不能操作

    2021-02-05 14:53

  • 1***@qq.com (作者)

    你可以看一下最新更新的一块代码,只有十几行的样子

    2021-02-05 14:56

  • 1***@qq.com (作者)

    视频全屏播放,退出全屏后,发现字体被放大

    2021-02-05 16:13

  • 1***@qq.com (作者)

    类似的问题以及被其他人发现过

    https://ask.dcloud.net.cn/question/89070

    https://ask.dcloud.net.cn/question/79717

    2021-02-05 16:49

该问题目前已经被锁定, 无法添加新回复