app-AgricultureSmart/uniapp/pages/shop/shop.vue

<template>
  <view>
    <web-view src="@/hybrid/html/local.html"></web-view>
<!--    <view class="uni-padding-wrap uni-common-mt">-->
<!--      <view>-->
<!--        <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"-->
<!--               @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>-->
<!--      </view>-->
<!--      &lt;!&ndash; #ifndef MP-ALIPAY &ndash;&gt;-->
<!--      <view class="uni-list uni-common-mt">-->
<!--        <view class="uni-list-cell">-->
<!--          <view>-->
<!--            <view class="uni-label">弹幕内容</view>-->
<!--          </view>-->
<!--          <view class="uni-list-cell-db">-->
<!--            <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="uni-btn-v">-->
<!--        <button @click="sendDanmu" class="page-body-button">发送弹幕</button>-->
<!--      </view>-->
<!--      &lt;!&ndash; #endif &ndash;&gt;-->
<!--    </view>-->
  </view>
</template>
<script>
export default {
  data() {
    return {
      src: '',
      danmuList: [{
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
        {
          text: '第 3s 出现的弹幕',
          color: '#ff00ff',
          time: 3
        }
      ],
      danmuValue: ''
    }
  },
  onReady: function(res) {
    // #ifndef MP-ALIPAY
    this.videoContext = uni.createVideoContext('myVideo')
    // #endif
  },
  methods: {
    sendDanmu: function() {
      this.videoContext.sendDanmu({
        text: this.danmuValue,
        color: this.getRandomColor()
      });
      this.danmuValue = '';
    },
    videoErrorCallback: function(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      })
    },
    getRandomColor: function() {
      const rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length == 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    }
  }
}
</script>

<!--<template>-->
<!--  <view class="content">-->
<!--    <view class="player-content">-->
<!--      <live-player id="livePlayer" class="live-player" catchtouchmove :src="currentUrl" autoplay-->
<!--                   background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">-->
<!--        <view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">-->
<!--          <view class="tools">-->
<!--            <view class="full-screen" @tap.stop="handleFullScreen()">-->
<!--              <text class="iconfont" v-if="!fullScreenFlag">进入全屏</text>-->
<!--              <text class="iconfont" v-else>&#xe67e;</text>-->
<!--            </view>-->
<!--            <view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">-->
<!--              <text class="iconfont">退出全屏</text>-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </live-player>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      isPlaySource: false, //是否有播放源-->
<!--      isVideoLive: false, //是否是直播-->
<!--      isAutoplay: true, //是否自动播放-->
<!--      videoMsg: '', //video消息-->
<!--      currentUrl: '', //播放路径-->
<!--      showControlbar: true,-->
<!--      timer:null,-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    showControlbar(val, oldVal) {-->
<!--      if(val){-->
<!--        this.timer = setTimeout(()=>{-->
<!--          this.showControlbar = false-->
<!--        },5000)-->
<!--      }else{-->
<!--        clearTimeout(this.timer);-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  onLoad() {-->
<!--    this.playerCtx = uni.createLivePlayerContext('livePlayer');-->
<!--  },-->
<!--  created() {-->
<!--    this.getLiveList()  //视频流列表-->
<!--    setTimeout(()=>{-->
<!--      this.showControlbar = false-->
<!--    },10000)-->
<!--  },-->

<!--  methods: {-->
<!--    handleControlbar() {-->
<!--      this.showControlbar = !this.showControlbar-->
<!--    },-->
<!--    getLiveList() {-->
<!--      this.$api.livePage.getLiveList().then(res => {-->
<!--        //业务逻辑-->
<!--      }).catch(err => {-->
<!--        console.log('err');-->
<!--      });-->
<!--    },-->
<!--    // 巡航-->
<!--    handleCruise() {-->
<!--      // #ifdef  MP-WEIXIN-->
<!--      uni.vibrateShort();-->
<!--      // #endif-->
<!--    },-->
<!--    //全屏功能的实现-->
<!--    handleFullScreen() {-->
<!--      var that = this-->
<!--      if (!that.fullScreenFlag) {-->
<!--        //全屏-->
<!--        that.playerCtx.requestFullScreen({-->
<!--          success: res => {-->
<!--            that.fullScreenFlag = true-->
<!--            console.log('我要执行了');-->
<!--          },-->
<!--          fail: res => {-->
<!--            console.log('fullscreen fail');-->
<!--          },-->
<!--          direction: 90-->
<!--        });-->
<!--      } else {-->
<!--        //缩小-->
<!--        that.playerCtx.exitFullScreen({-->
<!--          success: res => {-->
<!--            that.fullScreenFlag = false-->
<!--            console.log('我要执行了');-->
<!--          },-->
<!--          fail: res => {-->
<!--            console.log('exit fullscreen success');-->
<!--          }-->
<!--        });-->
<!--      }-->
<!--    },-->
<!--  }-->
<!--}-->
<!--</script>-->


<!--<style lang="scss" scoped>-->
<!--.content {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  .player-content {-->
<!--    position: relative;-->
<!--    width: 100%;-->
<!--    height: 450rpx;-->
<!--    display: flex;-->
<!--    background-size: 100% 100%;-->

<!--    .live-player {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      position: relative;-->
<!--    }-->
<!--  }-->
<!--}-->
<!--//播放器弹出工具-->
<!--.player-tool {-->
<!--  width: 100%;-->
<!--  height: 60rpx;-->
<!--  background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  position: absolute;-->
<!--  left: 0;-->
<!--  padding: 0 45rpx;-->
<!--  transition: all 0.3s;-->
<!--  .tools {-->
<!--    height: 100%;-->
<!--    width: auto;-->
<!--    display: flex;-->
<!--    align-items: center;-->

<!--    .full-screen {-->
<!--      height: 100%;-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->

<!--      .iconfont {-->
<!--        color: #fff;-->
<!--        font-weight: bold;-->

<!--      }-->
<!--    }-->

<!--    .cruise {-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: center;-->
<!--      margin-left: 25rpx;-->

<!--      .iconfont {-->
<!--        color: #E45A3E;-->
<!--        font-size: 45rpx;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--}-->
<!--</style>-->


<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;	<view>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;		<my-grid></my-grid>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;    <video&ndash;&gt;-->
<!--&lt;!&ndash;        id="myVideo"&ndash;&gt;-->
<!--&lt;!&ndash;        :src="src"&ndash;&gt;-->
<!--&lt;!&ndash;        :controls="controls"&ndash;&gt;-->
<!--&lt;!&ndash;        :autoplay="autoplay"&ndash;&gt;-->
<!--&lt;!&ndash;        style="width: 100%; height: 300px;"&ndash;&gt;-->
<!--&lt;!&ndash;    ></video>&ndash;&gt;-->
<!--&lt;!&ndash;	</view>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;	export default {&ndash;&gt;-->
<!--&lt;!&ndash;		data() {&ndash;&gt;-->
<!--&lt;!&ndash;			return {&ndash;&gt;-->
<!--&lt;!&ndash;        src: '../../static/vedio/1.mp4',  // 视频地址&ndash;&gt;-->
<!--&lt;!&ndash;        controls: true,  // 是否显示控制条&ndash;&gt;-->
<!--&lt;!&ndash;        autoplay: false,  // 是否自动播放&ndash;&gt;-->

<!--&lt;!&ndash;      };&ndash;&gt;-->
<!--&lt;!&ndash;		}&ndash;&gt;-->
<!--&lt;!&ndash;	}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;<style lang="scss">&ndash;&gt;-->

<!--&lt;!&ndash;</style>&ndash;&gt;-->