用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序上传视频预览

Rolan 2017-11-6 00:32

video组件的层级是最高的,代码覆盖不了,这就导致删除视频的按钮没法溢出组件去显示,为了实现这个溢出显示删除按钮,我把预览改为点击view组件直接全屏播放,退出全屏停止播放, ...


video组件的层级是最高的,代码覆盖不了,这就导致删除视频的按钮没法溢出组件去显示,为了实现这个溢出显示删除按钮,我把预览改为点击view组件直接全屏播放,退出全屏停止播放,UI显示如图

UI效果 
wxml

  1. <view class="prew_img" wx:for="{{chooesImage}}" wx:key="{{index}}" style="background-image:url({{item}});">
  2. <view class="bind" data-group="{{chooesImage}}" data-current="{{item}}" bindtap="bindPreviewImage"></view>
  3. <image class="delete" data-index="{{index}}" bindtap="bindDeleteImage" src="../../static/img/delete.png"></image>
  4. </view>
  5. <view class="prew_video" hidden="{{chooesVideo==''}}">
  6. <video id="prew_video"
  7. autoplay="true"
  8. muted="{{!playVideo}}"
  9. bindfullscreenchange="bindVideoScreenChange"
  10. src="{{chooesVideo}}" ></video>
  11. <image class="play" bindtap="bindPreviewVideo" src="../../static/img/play.png"></image>
  12. <image class="delete" bindtap="bindDeleteVideo" src="../../static/img/delete.png"></image>
  13. </view>
  14. <image class="upload" hidden="{{chooesImage.length==9||chooesVideo!=''}}" bindtap="bindChooseMedia" src="../../static/img/add.png"></image>

在这我把video先自动播放,不然全屏会失败,选择加载后就静音播放

wxss

  1. .prew_img,.upload,.prew_video{
  2. width: 148rpx;
  3. height: 148rpx;
  4. margin: 0 30rpx 30rpx 0;
  5. }
  6. .prew_img{
  7. position: relative;
  8. background: no-repeat center center;
  9. background-size: cover;
  10. }
  11. .prew_img .bind{
  12. width: 100%;
  13. height: 100%;
  14. }
  15. .prew_img .delete,.prew_video .delete{
  16. position: absolute;
  17. top: -16rpx;
  18. right: -16rpx;
  19. width: 32rpx;
  20. height: 32rpx;
  21. z-index: 9;
  22. }
  23. .prew_video{
  24. display: flex;
  25. align-items: center; /*垂直居中*/
  26. justify-content: center; /*居中对齐*/
  27. position: relative;
  28. background-color: #000;
  29. }
  30. .prew_video[hidden]{
  31. display: none;
  32. }
  33. .prew_video .play{
  34. width: 48rpx;
  35. height: 48rpx;
  36. }
  37. /* 坑~ video必须先渲染出来,不然全屏会横屏 */
  38. #prew_video{
  39. position: absolute;
  40. left: 0;
  41. top: 0;
  42. width: 1rpx;
  43. height: 1rpx;
  44. }

js

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. tipHide: false,
  7. chooseTypeHide: true,
  8. chooesImage: [],
  9. chooesVideo: '',
  10. playVideo: false
  11. },
  12. 邀请
    鲜花
    鲜花 (1)
    鸡蛋
    鸡蛋 (1)

    刚表态过的朋友 (2 人)

    分享至 : QQ空间
    收藏
    原作者: 不二很纯洁 来自: 简书

    相关阅读

    推荐阅读

      最新Demo