vue+video.js注意事项

最新推荐文章于 2024-08-16 19:49:10 发布
最新推荐文章于 2024-08-16 19:49:10 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kshon/article/details/101692059
版权

1、vue的生命周期不理解

在created期间，你是拿不到$el的内容以及不能操作dom，所以你的document.getElementById()永远为空

应该在mounted中初始化数据

2、不设置source的src，而是设置video的src

因为你替换了source的src之后，页面是不刷新的，那你的视频还是无法播放，除非你写装载source的时候就设置src的值

用js设置video的src属性后，就能播放

kshon
关注
专栏目录
vue使用video.js进行视频播放功能
01-19
关于video.js video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放（可加载本地静态资源视频以及网络链接视频） 官网：videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <video id=myVideo class=video-js vjs-def
vue2项目中使用videojs，超级详细篇幅。
weixin_44191318的博客
07-09 2292
vue2中借助videjs工具利用video标签实现不同分屏模式下的视频项目，可支持多个视频同时播放，录制，截屏等
Vue.js 中的 mounted 生命周期钩子：2 万字深度解析
最新发布
weixin_63490470的博客
08-16 1123
mounted生命周期钩子是在 Vue 组件实例完成挂载后触发的回调函数。所谓挂载，指的是将组件的模板编译成真实的 DOM 元素，并将其插入到页面中。1.1mounted的触发时机当 Vue 实例完成挂载，将模板编译成真实的 DOM 元素并插入到页面中后，mounted钩子函数就会被调用。此时，组件的$el属性已经指向组件的根 DOM 元素，我们可以通过$el属性访问和操作 DOM 元素。1.2mounted的作用在mounted。
vue+video.js-contrib-hls.js+Video.js+m3u8&flash;播放demo
11-23
vue+video.js-contrib-hls.js+Video.js+m3u8&flash;播放demo 视频播放
vue使用video.js
qq_35664308的博客
04-16 597
1.安装 npm install video.js 2.引入全局样式 // main.js 中加入 import 'video.js/dist/video-js.css' 3.使用 <template> <div> <video ref="cjVideo" class="video-js vjs-default-skin"> <source src="https://bitdash-a.akamaihd.net/content/sint
vue中使用video.js，且可以截图、录制和下载视频
weixin_44042792的博客
03-13 3075
1. 安装video.js。
vue中使用video.js
u013195452的专栏
12-28 505
标题 1.首先下载Video。js 2.引入：importVideofrom'video.js' 3.页面中使用： <video style="display:none" :id="'myVideo'+index" class="video-js" :src="item.sourceUrl" controls ...
【vue】视频播放器video.js插件使用：
SunPeng的博客
10-05 9474
【vue】视频播放器video.js插件使用：
vue 组件中正确使用video.js，以及注意事项
wangliuqi123的博客
03-17 4669
注意事项： 1：初始化后要保存初始化的对象， 2：离开组件时，要销毁video对象。 3：使用element-ui组件dialog中使用video时，要在打开dialog的回调中初始化video 4：保证video对象在当前组件的生命周期中只被创建一次 首先安装： npm install --save video.js // 直播流 npm install --save vid...
全网最详细！vue中使用flv.js 播放直播监控视频流
weixin_43992359的博客
10-24 1万+
当时开发遇到一个要播放监控的功能，后台给我返回的是他们用rtsp流转换成的flv格式的视频流，页面无法直接播放rtsp流！
vue项目中自定义video视频控制条的实现代码
11-21
6. **注意事项**： - 当有多个video元素时，使用`ref`属性应确保唯一性，或者存储所有video元素的引用，然后通过索引访问。 - 视频的播放、暂停等操作需通过JavaScript直接调用video元素的方法，而不是使用内联...
Vue集成vue-video-player
小刘哥的博客
08-08 761
在 Vue.js 项目中集成视频播放功能可以通过使用 库来实现。这个库是基于 video.js 的 Vue 组件，它提供了一个易于使用的 Vue 组件来处理视频播放相关的功能。下面是如何在你的 Vue.js 项目中集成 的步骤：首先，你需要安装 。在你的项目目录中，打开终端并执行以下命令： 第二步：引入 vue-video-player 在你的 Vue 组件或全局应用中引入 。如果你希望在单个组件中使用，可以在该组件的 部分引入。以下是如何在一个单独的组件中引入和使用 的示例： 第三步：配
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
BADAO_LIUMANG_QIZHI的博客
03-09 8539
前面使用Vue播放RTMP流时，需要借助于flash。这种方式对于flash插件的安装与后续浏览器支持等都不是很好。可以采用将rtmp的视频流转换成HTTP-FLV的方式，然后前端通过bilibili的flv.js实现播放。
Vue视频播放（Video）
q2724338648的博客
11-10 3234
可自定义设置以下属性：视频文件url（src），必传，默认 ''，支持网络地址https和相对地址require('...')视频封面url（poster），默认 ''，支持网络地址https和相对地址require('...')在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s视频播放器宽度（width），默认为800px视频播放器高度（height），默认为450px视频就绪后是否马上播放（autoplay），默认为false。
vue中视频插件vue-video-player使用
梁小茹的博客
06-27 1303
视频插件 vue-video-player github地址：https://github.com/surmon-china/vue-video-player 安装 npm install vue-video-player --save 引入 全局引入和组件内引入（二选一） 全局引入 全局引用， 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' // 视频插件引用 import 'vue-video-player/src/custom
Vue2视频播放（Video）
热门推荐
Mr Dear的博客
10-10 3万+
Vue2简易封装的视频播放组件
Vue3视频播放（Video）
Mr Dear的博客
03-07 1万+
简易封装的视频播放组件，支持：自动播放；自动截取视频指定帧作为封面图；功能丰富，简单易用😁😁
Vue插入视频播放器之video
weixin_46214344的博客
05-29 2万+
Vue插入视频播放器前言一、video简介二、使用video1、下载video方法结果2、引入video三、使用效果1）播放前2）正在播放四、注意五、demo地址 前言 很久没有跟新了，最近在用vue做项目，没有时间更新，接下来的时间就不会了。在做项目时，需要在组件中放入视频播放器，在网上搜索了一下，发现video.js不错，所以在做项目时就是使用的video.js，这篇博客就说一下video.js。 一、video简介 video.js是一款web视频播放器，支持html5和flash两种播放方式。 官网
vue 自带video
明耀的博客
10-20 190
<template> <div class="video-doc"> <div> <label>基础</label> <div></div> <button><img /><label>文档视频</label></button> </div> <div> <video :src="videoUrl
Vue+TypeScript+video.js实现流媒体视频监控功能
"保存项目的基准-vue + typescript + video.js实现 流媒体播放 视频监控功能" 在项目管理中，基准是衡量项目执行情况的关键参考点。它是由项目计划中的关键元素组成的，如任务的开始和结束时间、预计的工作量、资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值