zoukankan      html  css  js  c++  java
  • Vue:uni-app学习(五)--媒体组件(图片、视频)

     一、图片展示

    <template>
        <view>
            <page-head :title="title"></page-head>
            <view class="uni-padding-wrap uni-common-mt">
                <view class="uni-title">
                    示例1 <text>
    本地图片</text>
                </view>
                <view class="uni-center" style="background:#FFFFFF; font-size:0;">
                    <!-- #ifdef MP-ALIPAY -->
                    <image class="image" mode="widthFix" src="../../../static/logo.png" />
                    <!-- #endif -->
                    <!-- #ifndef MP-ALIPAY -->
                    <image class="image" mode="widthFix" src="../../../static/logo.png" />
                    <!-- #endif -->
                </view>
                <view class="uni-title uni-common-mt">
                    示例2 <text>
    网络图片</text>
                </view>
                <view class="uni-center" style="background:#FFFFFF; font-size:0;">
                    <image class="image" mode="widthFix" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" />
                </view>
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    title: 'image'
                }
            }
        }
    </script>
    <style>
        .image {
            margin:40rpx 0;
             200rpx;
        }
    </style>

    图片展示模式:

    scaleToFill:不保持纵横比缩放图片,使图片完全适应

    aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来

    aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来

    top:不缩放图片,只显示图片的顶部区域

    bottom:不缩放图片,只显示图片的底部区域

    center:不缩放图片,只显示图片的中间区域

    left:不缩放图片,只显示图片的左边区域

    right:不缩放图片,只显示图片的右边边区域

    top left:不缩放图片,只显示图片的左上边区域

    top right:不缩放图片,只显示图片的右上边区域

    bottom left:不缩放图片,只显示图片的左下边区域

    bottom right:不缩放图片,只显示图片的右下边区域

    二、视频展示

    <template>
        <view>
        
            <view>
                <page-head :title="title"></page-head>
                <view class="uni-padding-wrap uni-common-mt" v-if="showVideo">
                    <view>
                        <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
                         @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>
                    </view>
                    <!-- #ifndef MP-ALIPAY || MP-TOUTIAO -->
                    <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>
                    <!-- #endif -->
                </view>
            </view>
            </view>
        </view>
        
    </template>
    <script>
        export default {
            data() {
                return {
                    title: 'video',
                    src: '',
                    danmuList: [{
                            text: '第 1s 出现的弹幕',
                            color: '#ff0000',
                            time: 1
                        },
                        {
                            text: '第 3s 出现的弹幕',
                            color: '#ff00ff',
                            time: 3
                        }
                    ],
                    danmuValue: '',
                    showVideo: false
                }
            },
            onReady: function(res) {
                // #ifndef MP-ALIPAY || MP-TOUTIAO
                this.videoContext = uni.createVideoContext('myVideo')
                // #endif
          // #ifdef APP-PLUS || MP-BAIDU
          setTimeout(()=>{
              this.showVideo = true
          },350)
          // #endif
          // #ifndef APP-PLUS || MP-BAIDU
          this.showVideo = true
          // #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>
    
    <style>
        video {
             690rpx;
        }
    </style>
  • 相关阅读:
    Android Gradle Plugin指南(五)——Build Variants(构建变种版本号)
    文件内容操作篇clearerr fclose fdopen feof fflush fgetc fgets fileno fopen fputc fputs fread freopen fseek ftell fwrite getc getchar gets
    文件操作篇 close creat dup dup2 fcntl flock fsync lseek mkstemp open read sync write
    嵌入式linux应用程序调试方法
    version control system:git/hg/subversion/cvs/clearcase/vss。software configruation management。代码集成CI:Cruisecontrol/hudson/buildbot
    最值得你所关注的10个C语言开源项目
    如何记录linux终端下的操作日志
    CentOS 5.5 虚拟机安装 VirtualBox 客户端增强功能
    sizeof, strlen区别
    C/C++嵌入式开发面试题
  • 原文地址:https://www.cnblogs.com/wukong1688/p/13485392.html
Copyright © 2011-2022 走看看