草庐IT

uniapp ->video 黑屏 无时长(新手容易遇到的坑)

妄梦久挽 2023-07-19 原文
属性名类型默认值说明平台差异说明
srcString要播放视频的资源地址
autoplayBooleanfalse是否自动播放
loopBooleanfalse是否循环播放
mutedBooleanfalse是否静音播放字节跳动小程序与飞书小程序不支持
initial-timeNumber指定视频初始播放位置,单位为秒(s)。字节跳动小程序与飞书小程序不支持
durationNumber指定视频时长,单位为秒(s)。字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)快手小程序不支持
danmu-listObject Array弹幕列表字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
danmu-btnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
page-gestureBooleanfalse在非全屏模式下,是否开启亮度与音量调节手势微信小程序、H5
directionNumber设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)H5、字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
show-progressBooleantrue若不设置,宽度大于240时才会显示字节跳动小程序、飞书小程序、快手小程序、京东小程序不支持
show-fullscreen-btnBooleantrue是否显示全屏按钮京东小程序不支持
show-play-btnBooleantrue是否显示视频底部控制栏的播放按钮京东小程序不支持
show-center-play-btnBooleantrue是否显示视频中间的播放按钮字节跳动小程序、京东小程序不支持
show-loadingBooleantrue是否显示loading控件仅app 2.8.12+
enable-progress-gestureBooleantrue是否开启控制进度的手势字节跳动小程序、京东小程序不支持
object-fitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖App、微信小程序、字节跳动小程序、飞书小程序、H5、京东小程序
posterString视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效
show-mute-btnBooleanfalse是否显示静音按钮微信小程序、App-nvue
titleString视频的标题,全屏时在顶部展示微信小程序、App(3.6.7+)
play-btn-positionStringbottom播放按钮的位置微信小程序、字节跳动小程序、飞书小程序
mobilenet-hint-typenumber1移动网络提醒样式:0是不提醒,1是提醒,默认值为1京东小程序
enable-play-gestureBooleanfalse是否开启播放手势,即双击切换播放/暂停微信小程序、快手小程序
auto-pause-if-navigateBooleantrue当跳转到其它小程序页面时,是否自动暂停本页面的视频微信小程序
auto-pause-if-open-nativeBooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的视频微信小程序
vslide-gestureBooleanfalse在非全屏模式下,是否开启亮度与音量调节手势(同 page-gesture)微信小程序、App(3.4.0+)、快手小程序
vslide-gesture-in-fullscreenBooleantrue在全屏模式下,是否开启亮度与音量调节手势微信小程序、App(3.4.0+)、快手小程序
ad-unit-idString视频前贴广告单元ID,更多详情可参考开放能力视频前贴广告(opens new window)微信小程序
poster-for-crawlerString用于给搜索等场景作为视频封面展示,建议使用无播放 icon 的视频封面图,只支持网络地址微信小程序
codecStringhardware解码器选择,hardware:硬解码(硬解码可以增加解码算力,提高视频清晰度。少部分老旧硬件可能存在兼容性问题);software:ffmpeg 软解码;App-Android 3.1.0+
http-cacheBooleantrue是否对 http、https 视频源开启本地缓存。缓存策略:开启了此开关的视频源,在视频播放时会在本地保存缓存文件,如果本地缓存池已超过100M,在进行缓存前会清空之前的缓存(不适用于m3u8等流媒体协议)App-Android 3.1.0+
play-strategyNumber0播放策略,0:普通模式,适合绝大部分视频播放场景;1:平滑播放模式(降级),增加缓冲区大小,采用open sl解码音频,避免音视频脱轨的问题,可能会降低首屏展现速度、视频帧率,出现开屏音频延迟等。 适用于高码率视频的极端场景;2: M3U8优化模式,增加缓冲区大小,提升视频加载速度和流畅度,可能会降低首屏展现速度。 适用于M3U8在线播放的场景App-Android 3.1.0+
headerObjectHTTP 请求 HeaderApp 3.1.19+
@playEventHandle当开始/继续播放时触发play事件字节跳动小程序与飞书小程序不支持
@pauseEventHandle当暂停播放时触发 pause 事件字节跳动小程序与飞书小程序不支持
@endedEventHandle当播放到末尾时触发 ended 事件字节跳动小程序与飞书小程序不支持
@timeupdateEventHandle播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次字节跳动小程序与飞书小程序不支持
@fullscreenchangeEventHandle当视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal字节跳动小程序与飞书小程序不支持
@waitingEventHandle视频出现缓冲时触发字节跳动小程序、飞书小程序、快手小程序不支持
@errorEventHandle视频播放出错时触发字节跳动小程序与飞书小程序不支持
@progressEventHandle加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比微信小程序、H5
@loadeddataEventHandle视频资源开始加载时触发京东小程序
@loadstartEventHandle开始加载数据京东小程序
@seekedEventHandle拖动进度条结束京东小程序
@seekingEventHandle正在拖动进度条京东小程序
@loadedmetadataEventHandle视频元数据加载完成时触发。event.detail = {width, height, duration}微信小程序、H5、京东小程序
@fullscreenclickEventHandle视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型,点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型,点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型,屏幕总宽度", screenHeight:"Number类型,屏幕总高度"}App 2.6.3+
@controlstoggleEventHandle切换 controls 显示隐藏时触发。event.detail = {show}微信小程序2.9.5
<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <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@20200317.mp4"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <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>
</template>
<script>
export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #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>

视频加上发送弹幕功能

HBuilder 不能用自带的内制浏览器      (预览别用)

有关uniapp ->video 黑屏 无时长(新手容易遇到的坑)的更多相关文章

  1. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  2. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  3. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  4. ruby-on-rails - ruby 新手,有人可以帮我从控制台破译这个错误吗? - 2

    我真的只是不确定这意味着什么或我应该做什么才能让网页在我的本地主机上运行。现在它只是显示一个错误,上面写着“我们很抱歉,但出了点问题。”当我运行railsserver并在chrome中打开localhost:3000时。这是控制台输出:StartedGET"/users/sign_in"for127.0.0.1at2013-07-0512:07:07-0400ProcessingbyDevise::SessionsController#newasHTMLCompleted500InternalServerErrorin55msNoMethodError(undefinedmethod`

  5. ruby - Nokogiri:遇到 nil:NilClass 错误 "undefined method ‘text’” - 2

    我是程序员的新手,请原谅我的新手。所以我正在使用Nokogiri来抓取警方的犯罪记录。这是下面的代码:require'rubygems'require'nokogiri'require'open-uri'url="http://www.sfsu.edu/~upd/crimelog/index.html"doc=Nokogiri::HTML(open(url))putsdoc.at_css("title").textdoc.css(".brief").eachdo|brief|putsbrief.at_css("h3").textend我使用选择器小工具书签来查找日志(.brief)的C

  6. 电脑启动后显示器黑屏怎么办?排查下面4个问题,快速解决 - 2

    电脑启动出现显示器黑屏是一个相当常见的问题。如果您遇到了这个问题,不要惊慌,因为它有很多可能的原因,可以采取一些简单的措施来解决它。在本文中,小编将介绍下面4种常见的电脑启动后显示器黑屏的原因,排查这些原因,快速解决! 演示机型:联想Ideapad700-15ISK-ISE系统版本:Windows10一、显示器问题如果出现电脑启动后显示器黑屏的情况。那么首先您需要检查一下显示器是否正常工作。您可以通过更换另一个显示器或将当前显示器连接到另一台计算机来检查显示器是否存在问题。如果问题仍然存在,那么您可以排除显示器故障的可能性。 二、显卡问题如果您的电脑配备了独立显卡,那么显卡故障也可能是导致电脑

  7. ruby-on-rails - Rails 新手 : Recommendations for error handling in controller - 2

    抱歉,如果问题很明显,我才刚刚开始使用Rails。我现在在几个Controller方法中有以下代码:respond_todo|format|if@project.saveformat.html{redirect_to(edit_project_url(@project),:notice=>'#{user.name}addedto#{role}.')}format.jselseformat.html{render:action=>"edit"}format.js#...endend那么问题来了,对于所有方法中的错误,最好的方法是什么?是否建议我使用save!并在rescue_action

  8. ruby - 在 ubuntu 中安装 rvm 时遇到问题 - 2

    我刚刚使用以下命令在我的机器上安装了rvmbash在我的终端里得到了这个InstallationofRVMto/home/rahul/.rvm/iscomplete.当我转到/home/rahul/.rvm/时,我能够看到所有必要的文件夹,但是当我在终端中输入rvm命令时,出现此错误rvm--versionNocommand'rvm'found,butthereare19similaronesrvm:commandnotfound我该如何解决?编辑我还在我的bashrc中添加了以下几行if[[-n"$PS1"]];thenif[[-s$HOME/.rvm/scripts/rvm]];t

  9. ruby - 在我的 Mac 上安装 ruby​​ gem json 时遇到问题 - 2

    我在尝试通过ruby​​gems安装json模块时收到此警告。有什么想法吗?Mac-Minipoulh$sudogeminstalljsonPassword:WARNING:File'/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/gems/1.8/specifications/json-1.2.0.gemspec'doesnotevaluatetoagemspecificationBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errori

  10. L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误 - 2

    废话不多先看bug解决方案在下面!!!!启动服务查看服务是否开启首先我的电脑-右键-管理-服务和应用程序-服务-找到IPsecPolicyAgent-右键属性-启动方式改为自动,并重启服务,如下图打开设置-更改适配器选项如下图点击连接失败的连接-右键-属性-安全-允许使用这些协议编辑注册表按Ctrl+R打开命令行窗口输入regedit打开注册表输入下面命令进入以下页面HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\RasMan\Parameters如下图在右侧编辑菜单上,鼠标右键新建,然后单击DWORD(32)位值。键入Prohibit

随机推荐