vediojs 使用方法及使用中遇到的问题

这篇具有很好参考价值的文章主要介绍了vediojs 使用方法及使用中遇到的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、使用步骤

使用npm命令,安装 npm install video.js

the element or id supplied is not valid. (videojs),问题解决,前端,javascript,vue.js

首先,在main.js中引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

 两种使用方法:

第一种,使用ref

          <!-- 视频使用vediojs vue-video-player是vediojs封装的vue的, -->
          <video ref="videoPlayer" class="video-js" poster="">
            <source src="./cam-01_1_9_2022_10_13_13_55_26_1665640526003203 copy.mp4" />
          </video>

下面是初始化的方法,不是很理解为什么要初始化,貌似是因为一般情况下视频会自动播放,用来解决不想让视频一上来就加载,而是在特定情况下执行时使用 ,(要在元素渲染后初始化)

  mounted() {
    // 播放参数
    let options = {
      controls: false, // 是否显示底部控制栏
      preload: 'auto', // 加载<video>标签后是否加载视频
      autoplay: 'muted', // 静音播放
      // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
      // width: "100%",
      height: '500',
      // loop: "loop",
      controlBar: {
        // 自定义按钮的位置
        children: [
          {
            name: 'playToggle'
          },
          {
            name: 'progressControl'
          },
          {
            name: 'currentTimeDisplay'
          },
          {
            name: 'timeDivider'
          },
          {
            name: 'durationDisplay'
          },

          {
            name: 'volumePanel', // 音量调整方式横线条变为竖线条
            inline: false
          },
          {
            name: 'pictureInPictureToggle' //画中画播放模式
          },
          {
            name: 'fullscreenToggle'
          }
        ]
      }
    }
    this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
  },

 第二种,使用id

<template>
  <div>
    <div v-for="(item,index) in videoList" :key="index"  class="test_two_box">
      <video :id="'myVideo' + item.id" class="video-js">
        <source :src="item.src" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

 初始化方法

export default {
  data() {
    return {
      videoList: [
        {
          id: 0,
          src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
          cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
        },
        {
          id: 1,
          src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
          cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
        }
      ]
    }
  },
  mounted() {
    this.videoList.map((item, index) => {
      let myPlayer = this.$video('myVideo' + item.id, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        poster: item.cover,
        //自动播放属性,muted:静音播放
        // autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度(以像素为单位)
        width: "300px",
        //设置视频播放器的显示高度(以像素为单位)
        height: "150px"
      });
    })
  }
}

不过我使用初始化时,如果是一个视频,就如上两种方法,都没有问题,但一循环数组,就出问题了,两种方法都拿不到元素,报错:The element or ID supplied is not valid. (videojs)

于是,最终我使用的是没有初始化的,直接使用vedio标签,如下:

其中:loop循环播放、autoplay自动播放、muted静音播放、controls控制条、poster显示缩略图

     <div class="contentListItem" v-for="(item, index) in eventsearchs" :key="index">
        <video
          :id="'myVideo' + index"
          data-setup="{}"
          loop="loop"
          autoplay
          muted
          controls
          poster=""
          style="width: 100%;"
        >
          <source :src="item.video" />
        </video>
    </div>

2、多个视频使用方法

(5条消息) vue页面引入多个视频(video.js)_weixin_43503080的博客-CSDN博客

 

3、遇到问题 The element or ID supplied is not valid. (videojs)

说的是用来绑定vediojs的元素,找不到,我使用单个vedio就没问题,已使用v-for来循环就不行了,很奇怪,不知道是不是我的问题,你们也可以试一下

the element or id supplied is not valid. (videojs),问题解决,前端,javascript,vue.js文章来源地址https://www.toymoban.com/news/detail-640909.html

到了这里,关于vediojs 使用方法及使用中遇到的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用再生龙镜像备份还原linux,以及遇到的问题和解决方法

    准备工作: rufus镜像刻录软件 再生龙镜像 20G以上的u盘(系统备份文件的大小与系统盘的大小有关。200G的固态备份之后要占用10G左右空间) rufus: 链接:https://pan.baidu.com/s/133wksMYJ8NHaWpXRPKEr_w 提取码:kgrd –来自百度网盘超级会员V2的分享 再生龙镜像文件: 链接:https://pan.bai

    2024年02月03日
    浏览(80)
  • 在matlab中使用PTB时遇到的问题以及解决方法(随时更新)

    目录 问题1:错误使用 Screen methods: 问题2:图片太大,PTB函数无法呈现 methods: See error message printed above. 出错 PsychImaging (line 2470)             [win, winRect] = Screen(\\\'OpenWindow\\\', screenid, clearcolor, winRect, pixelSize,             numbuffers, stereomode, multiSample, imagingMode, specialFlags, clientRec

    2024年02月06日
    浏览(48)
  • 【经验分享】使用Keil5烧录代码遇到的问题及解决方法

    目录 一. 前言 二. 所遇问题及解决方法         1. 首先最基本的Options for target​编辑的设置不用多说,下载器根据自己所使用的类型进行选择。(我使用的是CMSIS-DAP)         2 .第二种可能出现的问题如下(SWD/JTAG Communication Failure):         3 .第三种可能出现的问题如

    2024年02月05日
    浏览(361)
  • STM32使用DMA传输UART空闲中断中接收的数据遇到的问题以及解决方法

    STM32使用DMA传输UART空闲中断中接收的数据遇到的问题以及解决方法 CubeMX配置 串口配置:使用默认配置(传输数据长度为8 Bit,奇偶检验无,停止位为1 Bit, 接收和发送都使能),因为我的是LIN项目所以使用的时串口的LIN模式,一般就是异步通信 打开DMA传输 打开串口接收中断

    2024年02月05日
    浏览(41)
  • 实际记录uni-app使用uni-download和uni.saveFile下载保存文件遇到的问题以及解决方法

    app里的开发的小程序需要下载文件功能以及一个下载中心页面可以查看所有下载的文件,使用了uni.download下载以及uni.saveFile保存文件 下载中心页面实现逻辑 1.下载文件后保存文件名和uni.saveFile返回的路径uni.setStorageSync到缓存里 2.下载中心读取uni.getStorageSync缓存的文件列表 通

    2024年02月12日
    浏览(72)
  • VUE+Element UI项目中使用el-table出现的内容块左右抖动问题解决方法

    el-table中出现的抖动问题 为了提高项目中组件的复用性,一般我们都会使用 v-if 或 v-show 加在 el-table-column 上来实现不同场景下页面内容的展示 现象描述 页面渲染出表格以及表格中的所有内容,当触发表格中的自定义点击事件或者切换tab页时,表格里面的单元格和内容行就会

    2024年02月06日
    浏览(51)
  • 使用python连接阿里云iot平台时遇到的问题及解决方法(on_connect打印的rc值为9,上传物模型值)

    使用python连接阿里云iot平台时遇到的问题及解决方法                                                            on_connect打印的rc值为9,上传物模型值 目的:在Windows端PYCharm软件上连接阿里云iot平台以获得、上报数据。 情况: 在使用网上相关资料后使用其代码,运行

    2024年02月08日
    浏览(39)
  • 解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题

    在实际开发实现表格的增删改查的时候,新增和修改通常共用一个弹窗以节省代码量  当我们先点击修改的时候,会对弹窗表单进行赋值,这个时候我们再点击新增,会发现刚刚的表单数据仍然躺在表单中,并且使用resetFields没有清除数据 其实resetFields()是生效了的,resetFie

    2024年02月16日
    浏览(53)
  • SVN使用:使用TortoiseSVN遇到提示请执行“清理”命令的解决方法

    作为程序员来说,在团队开发过程中关于代码管理的工具使用并不陌生,比较常用的代码合并管理工具如:Git、SVN等,虽然相关工具的使用并不复杂,但是还是要掌握常用的使用方法,尤其是相关的第三方软件的使用也是极为重要的,而且有时候使用这些三方软件来进行代码

    2024年02月05日
    浏览(40)
  • element plus Message方法手动关闭,close方法使用

    欢迎点击领取-《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的墙🔗 vue3.x setup写法是没有this的指向的;而element plus ui组件库也是没有的;近期的需求涉及到轮询接口,需要使用Message方法,Message 拥有可控的 duration, 默认的

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包