初始化仓库

2026-04-14 16:54:04 +08:00
commit 967c25b397
553 changed files with 106514 additions and 0 deletions
--- a/components/j-video/j-video.vue
+++ b/components/j-video/j-video.vue
@ -0,0 +1,136 @@
+<template>
+    <view class="root" :style="{ width, height }">
+        <image :style="{ width, height }" class="posterImg" :src="posterUrl"></image>
+        <view :style="{ width, height }" @click="state = !state" class="box">
+            <image class="playIcon" src="/static/images/icon_play.png" mode="widthFix"></image>
+        </view>
+        <video
+            :id="videoId"
+            :style="{ height, width: state ? '750rpx' : '1rpx' }"
+            @pause="state = 0"
+            @timeupdate="timeupdate"
+            @fullscreenchange="fullscreenchange"
+            class="video"
+            :src="url"
+            show-mute-btn
+        ></video>
+        <!-- <progress :style="{'top':height,width}" class="progress" :percent="currentTime?parseInt(currentTime/duration*100):0" show-info border-radius="5" active></progress> -->
+    </view>
+</template>
+
+<script>
+export default {
+    computed: {
+        posterUrl() {
+            if (this.poster) return this.poster
+            return (
+                this.url +
+                '?x-oss-process=video/snapshot,t_' +
+                parseInt(this.currentTime * 1000) +
+                ',f_jpg,w_800,m_fast'
+            )
+        }
+    },
+    created() {
+        this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + ''
+    },
+    mounted() {
+        this.VideoContext = uni.createVideoContext(this.videoId, this)
+    },
+    methods: {
+        fullscreenchange(e) {
+            this.state = e.detail.fullScreen
+        },
+        timeupdate(e) {
+            this.duration = e.detail.duration
+            this.currentTime = e.detail.currentTime
+        }
+    },
+    watch: {
+        state(state, oldValue) {
+            //console.log(state,'state');
+            if (!state) {
+                this.VideoContext.pause()
+            } else {
+                this.VideoContext.play()
+                setTimeout(() => {
+                    this.VideoContext.requestFullScreen({ direction: this.direction })
+                }, 10)
+            }
+        }
+    },
+    data() {
+        return {
+            VideoContext: {},
+            state: false,
+            currentTime: 0,
+            duration: 0,
+            videoId: ''
+        }
+    },
+    props: {
+        poster: {
+            type: [String, Boolean],
+            default() {
+                return ''
+            }
+        },
+        url: {
+            type: String,
+            default() {
+                return ''
+            }
+        },
+        direction: {
+            type: Number,
+            default() {
+                return 0
+            }
+        },
+        width: {
+            type: String,
+            default() {
+                return '750rpx'
+            }
+        },
+        height: {
+            type: String,
+            default() {
+                return '450rpx'
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.root {
+    position: relative;
+    width: 750rpx;
+    height: 300px;
+    overflow: hidden;
+}
+.posterImg,
+.video,
+.box {
+    display: flex;
+    width: 750rpx;
+    height: 300px;
+    //border: solid 1px red;absolute
+    position: absolute;
+}
+.video {
+    margin-left: -2000px;
+}
+.posterImg {
+    //border: solid red 1px;
+}
+.box {
+    justify-content: center;
+    align-items: center;
+}
+.playIcon {
+    width: 100rpx;
+    height: 100rpx;
+}
+</style>