vue DPlayer 仿微信朋友圈视频播放效果

HBuilder Webview iOS 中 video 标签播放视频，禁止自动全屏的方案

html

<div id="app">
  <div class="app2">
    <div id="dplayer" v-show="dpshow" @click="quan" class="dplayer-hide-controller"></div>
    <button id="btn" class="copy" @click="evt">
      点击全屏
    </button>
    <button id="qie" @click="qie">
      点击切地址
    </button>
  </div>
</div>

css

.dplayer {
  width: 100%;
}

.dplayer-controller {
  /* 底部控制条 */
  display: none;
}

.dplayer-notice {
  /* 快退进提示 */
  display: none;
}

.dplayer-menu.dplayer-menu-show {
  /* 右键信息 */
  display: none;
}

.dplayer-mask {
  /* 悬浮层 */
  display: inline-block;
}

js

var app = new Vue({
  el: '#app',
  data() {
    return {
      Player: true,
      dp: '',
      dpshow: false
    }
  },
  methods: {
    evt() {
      that = this;
      that.dpshow = true;
      that.dp.play();
      // ios 下播放器全屏还是会被自带播放器接管
      // that.dp.fullScreen.request('browser');
      //所以要使用网页全屏
      that.dp.fullScreen.request('web');
      // 显示通知
      // that.dp.notice("text:测试", "time:10")
      console.log("开始播放");

    },
    quan() {
      that = this
      console.log("播放后事件监控");
      var current = that.dp.video.currentTime;
      //只要开始播放点击视频就关闭
      if (current > 0) {
        console.log(current);
        // that.dpshow = false;
        // that.showVideo = false
        //设置视频时间跳转到结尾可自动触发 暂停和播放完毕
        // 如果 设置 跳转时间大于视频时间会小卡
        //设置跳转到末尾兼容性不太好
        // that.dp.seek(999);
        that.dp.pause();
        // that.dp.fullScreen.cancel('browser');
        // ios 下取消网页全屏会导致 闪屏 可以不取消 直接隐藏元素即可
        //that.dp.fullScreen.cancel('web');
        console.log("点击取消全屏");
      }
    },
    qie() {
      that = this
      if (that.Player) {
        //切换视频
        that.dp.switchVideo({
          url: 'http://cdn.toxicjohann.com/lostStar.mp4',
          // 设置视频第一帧为封面
          // pic:"http://cdn.toxicjohann.com/lostStar.mp4 + '?vframe/jpg/offset/1'",
          // thumbnails: 'second.jpg'
        });
        that.Player = !that.Player
        console.log("切视频1");
      } else {
        //切换视频
        that.dp.switchVideo({
          url: 'https://chimee.org/vod/1.mp4',
        });
        that.Player = !that.Player
        console.log("切视频2");
      }

    }
  },
  mounted() {
    that = this
    that.dp = new DPlayer({
      container: document.getElementById('dplayer'),
      preload: 'auto', //预加载
      screenshot: false, // 屏幕截图
      autoplay: false, //自动播放
      mutex: true, //互斥，阻止多个播放器同时播放
      volume: 1, //默认音量
      video: {
        url: 'https://chimee.org/vod/1.mp4',
        // pic: 'hikarunara.png',
        // thumbnails: 'hikarunara_thumbnails.jpg'
      },
    });

    that.dp.on('fullscreen_cancel', function () {
      // browser 全屏状态 才可以监控到 ios 监控不到
      console.log('取消全屏');
    });
    
    document.querySelector(".dplayer-mask").addEventListener('click', function (e) {
        // ios 下 开始播放被执行一次  之后又会被执行一次
        //这样可以防止ios下直接点击#dplayer 而导致闪屏问题
        //另外 如果在#dplayer 新建元素会无法显示
         console.log("监听 dplayer-mask 点击");
         that.pauseVideo();
    }, false);
  
    that.dp.on('pause', function () {
      //ios可以监控到
      // ios 下 手动点击隐藏播放器会 小闪屏，自动播完 监控到的暂停就不会闪屏
      console.log('暂停播放');
      that.dpshow = false;
      that.dp.seek(0);
      console.log("切换展示", that.dpshow);
    });

    that.dp.on('emptied', function () {
      console.log('耗尽什么鬼？');
    });

    that.dp.on('ended', function () {
      //ios可以监控到
      console.log('视频播放完成');
      that.dpshow = false;
      that.dp.seek(0);
      console.log("切换展示", that.dpshow);
    });

    that.dp.on('resize', function () {
      //ios browser 全屏状态下监控不到
      console.log('重新计算大小');
    });

  },
})