草庐IT

UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)

卡尔特斯 2023-04-14 原文
  • 在小程序开发的时候,其他小程序能够正常暂停、播放、切换进度,但是在微信小程序发现没有生效,原因是平台差异

    // 官网案例是这样获取 videoContext 的
    this.videoContext = uni.createVideoContext('myVideo')
    
    // 但是如果需要处理微信小程序的差异,则需要将 this 传入
    this.videoContext = uni.createVideoContext('myVideo', this)
    
  • 案例效果

    <template>
        <view class="video-view">
            <!-- 播放器 -->
            <video
                autoplay
                id="myVideo"
                class="video-content"
                :src="drama.limit_url"
                :controls="false"
                @loadedmetadata="loadedmetadata"
                @timeupdate="timeUpdate"
            >
            </video>
            <!-- 遮盖层 -->
            <view class="video-cover" @click="touchPlay">
                <view class="view-cover-content">
                    <!-- 信息栏 -->
                    <view class="video-info">
                        <!-- 弹簧 -->
                        <view style="flex: 1;"></view>
                        <!-- 显示时间 -->
                        <view class="video-time" v-if="isDrag">
                            <view class="video-time-current">{{ dragStarTime }}</view>
                            <view style="padding: 0 20rpx;">/</view>
                            <text>{{ dragEndTime }}</text>
                        </view>
                        <!-- 进度栏 -->
                        <view class="slider-view" @click.stop>
                            <u-slider
                                v-model="currentTime"
                                min="0"
                                :max="duration"
                                inactiveColor="rgba(255, 255, 255, 0.2)"
                                activeColor="#F8DD52"
                                @changing="sliderChanging"
                                @change="sliderChange"
                            ></u-slider>
                        </view>
                        <!-- 当前集数 -->
                        <view class="video-info-current" @click.stop>
                            <!-- 名称 -->
                            <view class="video-info-title text-ell" v-if="drama.project_drama_name">{{ drama.project_drama_name }}-第{{ drama.eq_number }}集</view>
                            <!-- 弹簧 -->
                            <view style="flex: 1;"></view>
                            <!-- 选集 -->
                            <view class="video-info-btn" @click="touchSwitch">
                                <view class="arrow-right-title">选集</view>
                                <u-icon name="arrow-right" color="#fff"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </template>
    
    <script>
    export default {
        props: {
            // 当前剧集
            drama: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                // 播放器上下文
                videoContext: undefined,
                // 播放状态
                isPlay: true,
                // 当前时长
                currentTime: 0,
                // 总时间
                duration: 0.1,
                // 是否正在拖拽进度
                isDrag: false,
                // 拖拽时视频时间
                dragStarTime: '',
                dragEndTime: '',
                // 当前还没显示过提示消息
                isShowMsg: true
            }
        },
        mounted () {
            // 获取播放器上下文(后面的 this 需要传入,在微信小程序上无法暂停播放拖拽精度,所以需要传入这个)
            this.videoContext = uni.createVideoContext('myVideo', this)
        },
        methods: {
            // 播放
            play () {
                this.videoContext.play()
            },
            // 暂停
            pause () {
                this.videoContext.pause()
            },
            // 播放状态切换
            touchPlay () {
                this.isPlay = !this.isPlay
                if (this.isPlay) {
                    this.play ()
                } else {
                    this.pause()
                }
            },
            // 播放进度发生变化
            timeUpdate (e) {
                // 拖拽时不需要进行更新
                if (!this.isDrag) {
                    // 更新进度
                    const { currentTime } = e.detail
                    this.currentTime = currentTime
                    // 播放完成
                    if (Math.trunc(currentTime) === Math.trunc(duration)) {
                        this.$emit('playcomplete', e)
                    }
                    // 返回当前播放时间
                    this.$emit('timeupdate', e)
                }
            },
            // 拖拽结束
            sliderChange (value) {
                // 停止拖拽
                this.isDrag = false
                // 判断一下是否大于基础时间
                if (this.duration > 0.1) {
                    // 跳到指定时间点
                    this.videoContext.seek(value)
                    // 并调用播放
                    this.play()
                }
            },
            // 正在拖拽
            sliderChanging (value) {
                // 开始拖拽
                this.isDrag = true
                // 刷新时间
                this.reloadVideoTime()
            },
            // 刷新显示时间
            reloadVideoTime () {
                // 当前时间
                this.dragStarTime = this.$pub.TIME_CONVERT(this.currentTime)
                // 总时间
                this.dragEndTime = this.$pub.TIME_CONVERT(this.duration)
            },
            // 加载完成
            loadedmetadata (e) {
                const { duration } = e.detail
                // 记录视频总时间
                this.duration = duration
                // 回调
                this.$emit('loadcomplete')
            },
            // 切换选集
            touchSwitch () {
                this.$emit('switch')
            }
        }
    }
    </script>
    
    <style lang="scss">
    .video-view {
        position: relative;
        width: 100%;
        height: 100%;
        .video-content {
            width: 100%;
            height: 100%;
        }
        .video-cover {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            .view-cover-content {
                position: relative;
                width: 100%;
                height: 100%;
                .video-info {
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 246rpx;
                    background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 100%, rgba(0,0,0,0.40) 100%);
                    .slider-view {
                        flex-shrink: 0;
                    }
                    .video-info-current {
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        color: #fff;
                        font-size: 34rpx;
                        padding: 0 40rpx 40rpx;
                        width: calc(100% - 80rpx);
                        .video-info-btn {
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            padding-left: 40rpx;
                            .arrow-right-title {
                                margin-right: 10rpx;
                            }
                        }
                    }
                    .video-time {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 64rpx;
                        color: rgba(255, 255, 255, 0.7);
                        .video-time-current {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    </style>
    

有关UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  9. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

随机推荐