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>\n本地图片</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>\n网络图片</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;
        width: 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 {
        width: 690rpx;
    }
</style>