uniapp使用videojs播放视频

最新推荐文章于 2024-03-03 11:49:57 发布
最新推荐文章于 2024-03-03 11:49:57 发布
阅读量7.1k 收藏 7
点赞数 1
分类专栏： 微信小程序开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010513497/article/details/116046262
版权

文章目录

基本配置和使用

官方的文档
简单来说：

  1. 直接复制模板文件index.html，放在跟目录下
  2. 在manifest.json中配置，如图
    在这里插入图片描述
  3. 按照官方文档进行初始化

配置后使用遇到问题（m3u8格式视频）

播放页面请求url后播放不了

解决方式：就在点击列表的时候请求url，进入页面初始化的时候就配置好请求到的url

播放页面退出后，再进入出错

解决方式：参考博文
就在onUnload周期方法中销毁播放器

设置播放按钮位置

查了好多文章设置居中都无效，最后找到官方文档

官方文档

根据官方文档的介绍，简单来说，就是我们需要自己设置自定义css，然后引用在video-js.min.css之后，我最后的方式是直接在之前的index.html中添加：
在这里插入图片描述
并且是亲测有效的：
在这里插入图片描述
在这里插入图片描述

snotJam
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniappNvueVideo：这是开源的nvue视频项目
02-15
uniappNvueVideo：这是开源的nvue视频项目
videojs播放rtmp.rar
10-11
videojs播放rtmp视频demo
uni-app在H5平台使用video.js
sunddy_x的博客
06-15 4147
前言 项目中用到了视频监控功能，而这部分功能还是外包给第三方做的，他们只提供了jquery+video.js的demo。uni-app中video是组件不是原生video标签，导致我无法按照demo来实现效果，当时采用了webview引用本地html的方案（非常拉胯）。本来过去也就过去了，但是客户又改了页面布局，视频改为弹窗播放后出现了意料之外的问题导致ios无法播放，不得已只得寻求其他解决方案，最后找到了它。查看原文 具体方案 1.创建模板文件index.html，在模版内引用video.js..
uniapp 的video播放如何实现小窗功能
最新发布
m0_71966801的博客
03-03 861
方法创建一个视频播放器，并传入相应的参数来开启小窗模式。在上述代码中，当视频开始播放时，判断。方法来关闭小窗模式。
Vue项目使用Video.js播放m3u8格式音（视）频流
weixin_58860430的博客
03-30 4996
记录工作中遇到的问题 需求：点击播放按钮显示弹层，在弹层上播放m3u8格式的音频流 效果如下： 点击父组件的播放按钮 弹层显示出来，播放音频流（背景图片是我自己加的） 使用步骤： 1.安装video.js和videojs-contrib-hls npm i video.js npm i videojs-contrib-hls 2.组件中引入 import videojs from 'video.js' import 'video.js/dist/video-js...
vue使用video.js播放m3u8格式视频
lth002的博客
11-14 668
【代码】vue使用video.js播放m3u8格式视频。
videojs vue 动态source_vue项目中使用vuevideoplayer播放m3u8格式视频
weixin_39557576的博客
11-22 531
安装文件npm install --save vue-video-playernpm install --save videojs-contrib-hls理论上安装这两个就够了，但我安装时给的提示需要再安装一个：npm install --save mux.js/lib/mp4/caption-parserbut安装这一条会报错要安装这个：pm install --save mux.js...
uni-app中使用video.js
cyj0919的博客
03-14 2070
【代码】uni-app中使用video.js。
uni-app npm方式引入video.js教程 支持H5播放m3u8、mp4等格式视频文件
热门推荐
wang_9909的博客
09-05 1万+
在uni-app中引入video.js有两种方式 1.通过cdn的方式引入 <link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet"> <script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script> 2.就是通过npm下载到项目的node-modul
uniapp中videojs、renderjs的使用
江拥羡橙的博客
10-09 1883
uniapp在APP端video层级最高，不能被其它覆盖，引入videojs实现，使用renderjs实现原生的DOM操作
uniapp的H5项目使用videojs播放m3u8类型视频
woxingliu2018的博客
08-03 2873
uniapp项目，运行在手机浏览器端，需要播放m3u8类型视频。在网上找了好久教程，记录一下实现过程。以及videojs官网。
关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题
weixin_43860852的博客
04-09 6578
关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题一、使用uniapp的原生video组件播放hls直播的问题二、尝试在app页面中使用webView，h5的video.js插件进行播放1.uniapp页面2.使用video.js播放直播的webview页面3.使用ckplayer播放器总结 一、使用uniapp的原生video组件播放hls直播的问题 使用uniapp自带的video组件倒是可以正常播放hls（m3u8后缀）格式的直播。倒是反馈不是很
videoJs播放视频和视频流
09-27
最近研究通过videoJs播放本地视频和网络视频流，现将学习成果总结供大家分享。 操作步骤如下： 1、下载解压文件，进入对应的文件打开HTML文件直接运行即可。 2、文件夹内容说明：前两个文件夹是播放本地不同格式视频...
vue使用video.js进行视频播放功能
10-16
video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放，这篇文章主要介绍了vue中使用video.js进行视频播放,需要的朋友可以参考下
videojs-playlist 视频列表播放_videojs列表
09-19
videojs-playlist 视频列表播放
VideoJs播放MP4视频通过blob加密视频源地址
06-08
支持使用VideoJs播放MP4视频，并且通过blob加密视频源地址，避免直接暴露视频URL，防盗链
uniapp关于scroll-view一直自动滚动到底部的功能
snoto的专栏
09-16 1万+
文章目录scroll-into-view使用scroll-top使用 需求：一般在scroll-view中会放置一个list列表，当列表条目增加的时候，使其自动滚动到底部显示最后一条 官方文档：scroll-view 有两个可用属性：声明scroll-into-view或者scroll-top 个人尝试后的结果，使用scroll-into-view在h5上有效，在微信小程序上无效；使用scroll-top在微信小程序也正常 scroll-into-view使用 <scroll-view scroll-
uniapp 深度选择器 ::deep
snoto的专栏
05-18 9659
文章目录使用场景解决方式 使用场景 引入使用了第三方的组件，想修改它的样式，找到其class名称，然后在style中重写该class，无效 原因：可以查看下面的文章 官方的解释 解决方式 比如我使用的是u-grid，看到它的class的层级是： <...u-grid...> <...u-grid-item...> <...u-grid-item-box...> ... ... 我要修改的是u-grid-item-box的内联样式的padding属性 使用深
uniapp尺寸适配的一些记录
snoto的专栏
12-18 9566
尺寸 可以参考 举例： 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。 若设计稿宽度为...
uniapp 使用 video.js
02-29
2. 在需要使用视频播放功能的页面中引入video.js库。可以在页面的`<script>`标签中使用`import`语句引入video.js库。 3. 在页面中创建一个`<video>`标签，并设置相应的属性和事件。可以通过设置`src`属性指定视频...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值