videojs系列之二-完善一点点

最新推荐文章于 2022-12-16 12:25:20 发布
最新推荐文章于 2022-12-16 12:25:20 发布
阅读量120 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000008190449
版权

上一篇中存在的问题

  • 第一个问题: 上一篇中的视频已经出来了, 但是下方有一大堆的提示文字, 很显然, 是不是我们需要的, 如图:

  • clipboard.png

  • 第二个问题: 我们明明已经设置了controls, 也就是有控制栏, 但是依然没有, 这是啥原因呢, 按理说应该是这样的才对

解决办法

  • 要解决这两个问题, 其实是一个解决办法: 引入一个videojs官方的css:https://vjs.zencdn.net/5-unsa... 引入这个CSS之后, 再在video标签上加个video-js的class, 就可以实现即有操作栏, 下方的提示文字也消失

上码

源码: 这一例

weixin_33847182
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
videojs-flash-2.2.0.zip
08-10
videojs.options.flash.swf = 'path/to/video-js.swf'; ``` 接着创建Video.js播放器实例，videojs-flash会自动处理Flash回退逻辑。 6. **注意事项** - 鉴于Adobe已经停止了对Flash Player的更新和支持，开发者...
videojs-contrib-quality-levels
05-01
videojs-contrib-quality-levels 一个插件，提供使用源质量级别的框架。 维护状态：稳定 安装安装使用填充列表HLS 包括插件[removed]标记浏览器要求JS / AMD 执照 安装npm install --save videojs-contrib-quality-...
videojs-dynamic-watermark: video.js 视频添加文字水印
weixin_42490897的博客
06-15 2567
videojs-dynamic-watermark: video.js 视频添加文字水印，随机移动
video 获取倒计时
qq_41851047的博客
08-22 593
1：首先看下效果图吧！（样式只是自己粗略写的）。 2：代码部分： （1）样式贴一下自己的： <style> #video { width:100%} .videoContent { position:relative;} .videoContent > div { position: absolute;color: #fff; font-siz...
VideoJS+HLS视频加密播放
寻找09之夏的博客
12-16 6734
VideoJS + HLS 视频加密播放
videojs中文文档详解
热门推荐
谢泽的网络日志
07-05 32万+
最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 官方网站 点此下载videojs.6.0.0 入门使用 引入video.js和video-js.css，使用video标签就像下面这样： &amp;lt;video id=&quot;e...
前端实现视频在线预览插件之video.js上手
Mr_Van的博客
12-04 6218
前端实现视频播放预览1、预览效果图2、预览窗口dom3、Js代码4、引入相应的js库和css布局即可进行预览了。 亲测G级视频秒播, 不考虑传输和缓存。当然视频得在服务器上 最近做了个新功能。说白了其实就是一个系统内的留言。当然留言内容包括视频留言、图片留言、信息留言、文档留言。对新提交的内容需要先进行预览和审核。然后针对附件内容进行下载。当然上传下载都是自己在做。后面有时间再来讲Java实现视频上传、转码、文件压缩、前端自定义导出word文档。 1、预览效果图 先上效果图吧，这是博主嵌套在界面里面的一
videojs-contrib-hls.js资源
10-23
为了解决这个问题，社区开发了一系列的插件，其中videojs-contrib-hls.js就是一款专门针对Video.js播放器，用于增强其对HLS流支持的开源工具。本篇文章将深入探讨videojs-contrib-hls.js的核心功能、工作原理以及...
videojs-mobile-ui:Video.js的移动用户界面
05-25
videojs-mobile-ui Video.js的移动用户界面。 触控功能： 双击播放器的左侧以快退十秒钟双击播放器的右侧以快进十秒钟轻按屏幕以显示播放/暂停切换全屏控制： 旋转到风景以进入全屏旋转时锁定为全屏目录安装安装npm ...
videojs-contrib-hls 5.15
11-21
videojs-contrib-hls是一个由video.js社区开发的插件，它的核心功能是为video.js这个流行的HTML5视频播放器提供对HLS流的支持。在5.15版本中，这个插件进一步提升了性能和稳定性，使得在不支持HLS的浏览器或平台上，...
videojs-video-tooltip:video.js的视频工具提示
05-12
video.js的视频工具提示 介绍 用于video.jsHTML5视频工具提示。 悬停的搜索栏显示循环的。 注意：在某些浏览器（Chrome）中，需要循环功能才能实现服务器端 要求 > =已加载v6（inc v7） 安装 npm install videojs-video-tooltip 简单的例子 < html > < head > <!-- Load dependent stylesheets. --> < link href =" path/to/video-js.css " rel =" stylesheet " > < link rel =" stylesheet " href =" path/to/videojs.video.tooltip.css " /> </ head > < body > < video id =" c
videojs-timer:video.js的简单计时器
05-22
Video.js计时器 video.js的计时器插件。 入门 将插件脚本添加到页面后，即可将其与任何视频配合使用： < script src =" video.js " > </ script > < script src =" videojs-timer.js " > </ script > < script > videojs ( document . querySelector ( 'video' ) ) . timer ( { "interval" : 15 , "event_name" : "test" } ) ; </ script > 还有一个的插件，您可以在遇到问题时查看。 文献资料 插件选项 您可以在初始化时将options对象传递给插件。 该对象可能包含以下任何属性： 间隔（必填） Desc：您要勾选计时器的时间间隔类型： integer event_nam
videojs 销毁重新初始化问题及其他使用
hadry123的博客
10-28 3万+
1.videojs 销毁 this.myvideo = videojs('myvideo', { bigPlayButton: false, textTrackDisplay: false, posterImage: true, error...
关于videoJs遇到的坑（一个页面有多个视频需要加载）
qq_39511525的博客
10-18 3万+
涉及到课程的视频：有多节课选择 废话不多说直接上代码： var videoPlayer = $("#my-video").get(0); if (typeof (videoPlayer) != "undefined") { var myPlayer = videojs('my-video'); myPlayer.dispose(); } 先判断之前有没有...
video-js 删除视频列表中的某个视频后，重复初始化不成功问题（通过ID初始化）
lai18520179783的博客
08-08 3088
问题：删除剪辑视频列表中的一个视频后，添加一个视频到列表，然后打开剪辑面板时，播放器video-js初始化失败，使用了浏览器默认的播放器。 原因（猜测）：由于ID格式为“videoPlayer_+index”,index是数组下标，在删除后添加的视频ID会与原有的已经初始化过的视频冲突 解决：ID格式改为使用唯一的接口提供的queue_id拼接（格式：“videoPlayer_+queue_i...
[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
Tinywan
04-11 2822
&#13;   DEMO地址：https://github.com/Tinywan/PHP_Experience   https://github.com/videojs/videojs-contrib-hls  下载JS文件，直接使用 &lt;video id=example-video width=600 height=300 class="video-js vjs-d...
videojs rtmp码流播放
07-10 2万+
...
VideoJs的简单使用
混沌人的博客
04-06 682
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。 官方下载video.js 引入css和js，创建Demo： <!DOCTYPE html> <html lang="en"> <head> <meta cha...
VideoJs使用总结
weixin_34409741的博客
01-22 2894
VideoJs简介 VideoJs是用于视频播放的javascript的库。 官方文档 使用方法 <div class="video"> <video id="player" class="video-js vjs-styles-defaults"> <!--<source sr...
引入 "videojs-contrib-hls" 报错
最新发布
07-27
另外，请确保您已经正确安装并配置了 Video.js 播放器库，因为 "videojs-contrib-hls" 是基于 Video.js 的插件。 如果您能提供更多关于错误信息、报错堆栈或您的代码片段，我将能够更准确地帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值