stellar-ui-plus 1.16.18

package/components/ste-video/ste-video.easycom.json

@@ -0,0 +1,226 @@
+{
+    "name": "ste-video",
+    "description": "视频",
+    "example": "<ste-video />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=video",
+    "attributes": [
+        {
+            "name": "title",
+            "description": "视频的标题，全屏时在顶部展示",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "autoHeight",
+            "description": "是否视频高度跟随父容器",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "resolution",
+            "description": "清晰度",
+            "type": "array",
+            "default": "[]"
+        },
+        {
+            "name": "src",
+            "description": "要播放视频的资源地址",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "autoplay",
+            "description": "是否自动播放",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "loop",
+            "description": "是否循环播放",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "muted",
+            "description": "是否静音播放",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "initialTime",
+            "description": "指定视频初始播放位置，单位为秒（s）。",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "duration",
+            "description": "指定视频时长，单位为秒（s）。",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "pageGesture",
+            "description": "在非全屏模式下，是否开启亮度与音量调节手势",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "direction",
+            "description": "设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "showFullscreenBtn",
+            "description": "是否显示全屏按钮",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "showPlayBtn",
+            "description": "是否显示视频底部控制栏的播放按钮",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "enableProgressGesture",
+            "description": "是否开启控制进度的手势",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "objectFit",
+            "description": "当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖",
+            "type": "string",
+            "default": "contain",
+            "values": [
+                {
+                    "name": "contain",
+                    "description": "包含"
+                },
+                {
+                    "name": "fill",
+                    "description": "填充"
+                },
+                {
+                    "name": "cover",
+                    "description": "覆盖"
+                }
+            ]
+        },
+        {
+            "name": "poster",
+            "description": "视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "mobileNetHintType",
+            "description": "移动网络提醒样式：0是不提醒，1是提醒，默认值为1",
+            "type": "number",
+            "default": 1,
+            "values": [
+                {
+                    "name": "0",
+                    "description": "不提醒"
+                },
+                {
+                    "name": "1",
+                    "description": "提醒"
+                }
+            ]
+        },
+        {
+            "name": "enablePlayGesture",
+            "description": "是否开启手势播放",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "autoPauseIfNavigate",
+            "description": "当跳转到其它小程序页面时，是否自动暂停本页面的视频",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "autoPauseIfOpenNative",
+            "description": "当跳转到其它微信原生页面时，是否自动暂停本页面的视频",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "vslideGesture",
+            "description": "在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "vslideGestureInFullscreen",
+            "description": "在全屏模式下，是否开启亮度与音量调节手势",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "adUnitId",
+            "description": "视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "posterForCrawler",
+            "description": "用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "codec",
+            "description": "解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码",
+            "type": "string",
+            "default": "hardware",
+            "values": [
+                {
+                    "name": "hardware",
+                    "description": "硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）"
+                },
+                {
+                    "name": "software",
+                    "description": "ffmpeg 软解码"
+                }
+            ]
+        },
+        {
+            "name": "httpCache",
+            "description": "是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源，在视频播放时会在本地保存缓存文件，如果本地缓存池已超过100M，在进行缓存前会清空之前的缓存（不适用于m3u8等流媒体协议）",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "playStrategy",
+            "description": "播放策略，0：普通模式，适合绝大部分视频播放场景；1：平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景",
+            "type": "number",
+            "default": 0,
+            "values": [
+                {
+                    "name": "0",
+                    "description": "普通模式，适合绝大部分视频播放场景"
+                },
+                {
+                    "name": "1",
+                    "description": "平滑播放模式（降级），增加缓冲区大小，采用open sl解码音频，避免音视频脱轨的问题，可能会降低首屏展现速度、视频帧率，出现开屏音频延迟等。 适用于高码率视频的极端场景；2： M3U8优化模式，增加缓冲区大小，提升视频加载速度和流畅度，可能会降低首屏展现速度。 适用于M3U8在线播放的场景"
+                }
+            ]
+        },
+        {
+            "name": "header",
+            "description": "HTTP 请求 Header",
+            "type": "object",
+            "default": "{}"
+        },
+        {
+            "name": "isLive",
+            "description": "是否为直播源",
+            "type": "boolean",
+            "default": "false"
+        }
+    ]
+}

package/components/ste-video/ste-video.scss

@@ -0,0 +1,201 @@
+.ste-video-root {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    .ste-video {
+        width: 100%;
+        display: block;
+    }
+
+    .ste-video-custom-content {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+    }
+
+    &.auto-height {
+        height: 100%;
+        .ste-video {
+            height: 100%;
+        }
+    }
+
+    &.full {
+        .cover {
+            position: fixed;
+
+            padding: 0 var(--rpx-to-px-24);
+
+            &.top {
+                background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, #000000 100%, #000000 100%);
+            }
+
+            &.bottom {
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+
+                padding: 0 var(--rpx-to-px-40);
+
+                .progress-box {
+                    padding-left: 0;
+                    padding-right: var(--rpx-to-px-32);
+                }
+
+                .text-box {
+                    padding-right: var(--rpx-to-px-32);
+                }
+
+                .time-box {
+                    padding-right: var(--rpx-to-px-46) !important;
+                    padding-left: var(--rpx-to-px-32);
+                }
+            }
+        }
+    }
+
+    .overlay-box {
+        width: 100%;
+        position: fixed;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 999;
+    }
+
+    .cover {
+        position: absolute;
+        line-height: 1;
+        width: 100%;
+        transition: transform 0.3s ease;
+        display: flex;
+        align-items: center;
+        padding: 0 var(--rpx-to-px-16);
+        height: var(--control-height);
+        pointer-events: auto;
+        color: #ffffff;
+        font-size: var(--cover-font-size);
+        &.top {
+            top: 0;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 5%, rgba(255, 255, 255, 0) 100%);
+
+            padding-left: var(--title-padding-left);
+
+            .title {
+                margin-left: 8px;
+                font-size: var(--rpx-to-px-36);
+            }
+        }
+
+        &.bottom {
+            bottom: 0;
+            // background: linear-gradient(0, rgba(0, 0, 0, 0.5) 5%, rgba(255, 255, 255, 0) 100%);
+            background-color: rgba(0, 0, 0, 0.6);
+
+            display: flex;
+            justify-content: space-between;
+
+            .muted-box {
+                padding-left: var(--rpx-to-px-16);
+            }
+
+            .progress-box {
+                flex: 1;
+                padding: 0 var(--rpx-to-px-32);
+
+                .progress-bar {
+                    width: var(--progress-bar-width);
+                    height: var(--progress-bar-width);
+                    border-radius: 50%;
+                    background-color: #ffffff;
+                }
+            }
+
+            .time-box {
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                padding-right: var(--rpx-to-px-20);
+
+                .time {
+                    width: var(--text-box-width);
+                    overflow: hidden;
+
+                    &.right {
+                        text-align: right;
+                    }
+                }
+            }
+        }
+    }
+
+    .popup-box {
+        height: 100vh;
+        width: 24.6vw;
+        position: absolute;
+        pointer-events: auto;
+        right: 0;
+        top: 0;
+        transition: transform 0.3s ease;
+        background-color: rgba(0, 0, 0, 0.8);
+
+        line-height: 1;
+        .item-box {
+            line-height: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            // gap: var(--choose-item-gap);
+
+            width: 100%;
+            height: 100%;
+        }
+
+        .choose-item {
+            &:not(:last-child) {
+                margin-bottom: var(--choose-item-gap);
+            }
+            color: #ffffff;
+            position: relative;
+            width: 100%;
+            text-align: center;
+            // display: flex;
+            // align-items: center;
+            > text {
+                font-size: var(--choose-item-font-size);
+            }
+
+            .check-icon {
+                display: flex;
+                position: absolute;
+                right: var(--check-icon-left);
+                // top: -1px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .tip-toast {
+        background-color: rgba(0, 0, 0, 0.7);
+        border-radius: 8px;
+        padding: 10px;
+
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: translate(-50%, -50%);
+        transition: all 0.2s;
+        visibility: hidden;
+        &.show {
+            visibility: visible;
+        }
+        .tip-text {
+            color: #ffffff;
+            font-size: 14px;
+            line-height: 1;
+        }
+    }
+}