cesuan/pages/knowlege/knowlege.vue

<template>
  <view class="page">
    <view class="box_1">
      <view class="group_1">
        <view class="box_2">
          <view class="section_2">
            <view class="nav-bar_1">
             <view class="searchbtn"></view>
             <input class="searchinput" type="text">
            </view>
          </view>
		  <view class="e-page">
		          <video class="course_image" id="myVideo" :src="videoUri" controls v-if="videoUri">
		              <cover-view class="video-control">
		                  <cover-view class="multi rate" @tap="showSwitchRate">x {{ currentRate }}</cover-view>
		              </cover-view>
		              <cover-view class="multi-list rate" :class="{ active: rateShow }">
		                  <cover-view
		                      v-for="(item, index) in ['0.5', '0.8', '1.0', '1.25', '1.5']"
		                      :key="index"
		                      class="multi-item rate"
		                      :data-rate="item"
		                      @tap="switchRate"
		                      :class="{ active: item == currentRate }"
		                  >
		                      {{ item }}
		                  </cover-view>
		              </cover-view>
		          </video>
		      </view>
		  
        </view>
      </view>
    </view>
  </view>
</template>


<script>
  import * as Api from '@/api/user'

  export default {
    data() {
     return {
                 videoUri: '//player.alicdn.com/video/aliyunmedia.mp4', // 视频地址
                 rateShow: false, // 倍速浮层
                 currentRate: 1.0 // 默认倍速
             }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
	  
	  Api.knowledgeInfo({id:options.id})
	    .then(result => {
	  	  this.videoUri = result.data.url;
		  
	  	  console.log(this.art);
	    })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		
    },

    methods: {
		
      // 显示倍速浮层
              showSwitchRate(rate) {
                  let that = this;
                  console.log('rateShow');
                  that.rateShow = true;
              },
              // 切换倍速
              switchRate(e) {
                  let that = this;
                  let rate = Number(e.currentTarget.dataset.rate);
                  that.currentRate = rate;
                  that.rateShow = false;
                  this.videoContext.playbackRate(rate);
              }
    },






  }
</script>

<style lang="scss" scoped>
	
	.e-page
	{
		margin-top: 80rpx;
	}
	
  .page {
    background-color: rgba(255,255,255,1.000000);
    position: relative;
    width: 750rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .box_1 {
    display: flex;
    flex-direction: column;
    width: 750rpx;
  }
  .group_1 {
    width: 750rpx;
    background: url(../../static/greanbg.png) 100% no-repeat;
    background-size: 100% 100%;
    flex-direction: row;
    display: flex;
	min-height: 100vh;
  }
  .box_2 {
    width: 750rpx;
    display: flex;
    flex-direction: column;
  }
  .section_1 {
    width: 651rpx;
    height: 22rpx;
    flex-direction: row;
    display: flex;
    margin: 39rpx 0 0 70rpx;
  }
  .text_1 {
    width: 56rpx;
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(255,255,255,1);
    font-size: 28rpx;
    font-family: SFProText-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 28rpx;
    margin-top: 1rpx;
  }
  .image_1 {
    width: 32rpx;
    height: 20rpx;
    margin: 1rpx 0 0 475rpx;
  }
  .image_2 {
    width: 29rpx;
    height: 20rpx;
    margin-left: 9rpx;
  }
  .group_2 {
    height: 22rpx;
    margin-left: 9rpx;
    display: flex;
    flex-direction: column;
    width: 41rpx;
  }
  .group_3 {
    background-color: rgba(255,255,255,1.000000);
    border-radius: 2rpx;
    width: 34rpx;
    height: 14rpx;
    display: flex;
    flex-direction: column;
    margin: 4rpx 0 0 4rpx;
  }
  .section_2 {
    width: 750rpx;
    margin-top: 19rpx;
    flex-direction: row;
    display: flex;
	background-image: url('../../static/logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 197rpx;
	height: 220rpx;
  }
  .nav-bar_1 {
    width: 200rpx;
    height: 38rpx;
    margin: 18rpx 0 0 21rpx;
    flex-direction: row;
    display: flex;

	.searchbtn
	{
		width: 50rpx;
		height: 38rpx;
	}
	
	.searchinput
	{
		height: 38rpx;
		width: 150rpx;
		font-size: 24rpx;
		color:#fff;
	}
  }
  
  .art_title
  {
	  font-size: 48rpx;
	  color:#ddd;
	  margin-bottom: 30rpx;
  }

  .artdetail
  {
  	color:#ddd;
  	margin:40rpx 30rpx;
	font-size: 24rpx;
  }
  
  /* 以下为视频CSS */
  .course_image {
      width: 100%;
  }
  .video-control {
      background-color: rgba(0, 0, 0, 0.1);
      height: 90rpx;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 997;
  }
  .video-wrap {
      position: relative;
  }
  .multi-list.full-screen.vertical {
      height: 100vh !important;
      padding: 8vh 0;
  }
  .multi-list.full-screen.horizontal {
      height: 100vw !important;
      padding: 8vw 0;
  }
  .multi {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      z-index: 998;
      width: 100rpx;
      color: #fff;
      padding: 10rpx 0;
      text-align: center;
      transition: color ease 0.3s;
  }
  .multi.rate {
      right: 30rpx;
  }
  .multi-list {
      position: absolute;
      height: 100%;
      width: 0;
      background-color: rgba(0, 0, 0, 0.65);
      top: 0;
      right: 0;
      transition: width 0.3s ease;
      z-index: 999;
      box-sizing: border-box;
      padding: 50rpx 0;
  }
  .multi-list.rate {
      padding: 25rpx 0;
  }
  .multi-list.active {
      width: 300rpx;
  }
  .multi-item {
      text-align: center;
      color: #fff;
      line-height: 80rpx;
      transition: color ease 0.3s;
  }
  .multi-item.rate {
      line-height: 70rpx;
  }
  .multi-item:hover,
  .multi:hover {
      color: #00d8ff;
  }
  .multi-item.active {
      color: #00d8ff;
  } /* 视频CSS结束 */
  
</style>