videojs插件中间播放按钮怎么显示？-CSDN论坛

videojs插件中间播放按钮怎么显示？

Web 开发 > JavaScript

收藏回复

[问题点数：100分]

⋅推荐个oracle快速创建索引的工具

⋅推荐一个好用的Java开源CMS

⋅videojs插件中间播放按钮怎么显示？

更多帖子

关注私信空间博客

ChengKing

本版专家分：1

结帖率 94.34%

微软MVP 2006年4月荣获微软MVP称号
2008年4月荣获微软MVP称号
2007年4月荣获微软MVP称号

蓝花 2005年10月 .NET技术大版内专家分月排行榜第三: 官方文档非常简单，没有说明。
目前默认是在下面控制面板中有播放/暂停按钮及其它音量等控制按钮，怎么实现可以在视频区域中间位置显示播放/暂停的大按钮？以方便手机触摸操控。
谢谢

2014-07-09 11:32:12

点赞 0 只看楼主引用举报楼主

⋅求一个linq Row_number的写法 ⋅asp.net自定义400错误显示 ⋅已经使用Tls12还是报错The request was aborted: Could not create SSL/TLS secure channel 更多帖子 关注私信空间博客 支付宝加好友偷能量挖 本版专家分：396045 探花 2017年总版技术专家分年内排行榜第三 进士 2018年总版新获得的技术专家分排名前十 2013年总版技术专家分年内排行榜第五 金牌 2018年5月总版技术专家分月排行榜第一 2018年4月总版技术专家分月排行榜第一 2018年2月总版技术专家分月排行榜第一 2017年8月总版技术专家分月排行榜第一 银牌 2018年3月总版技术专家分月排行榜第二 2017年11月总版技术专家分月排行榜第二 2016年2月总版技术专家分月排行榜第二 2014年2月总版技术专家分月排行榜第二 2013年4月总版技术专家分月排行榜第二

最新版本的播放按钮在左上角有了。。暂停就不必要显示在中间了吧，那不是挡住视频了

要显示在中间可以修改下面这个样式，增加left，right属性，覆盖css中定义的



  <link href="video-js.css" rel="stylesheet" type="text/css">

<style>

.vjs-default-skin .vjs-big-play-button {left:40%;top:40%;}

</style>

定位不是很准，除非修改js。。

2014-07-09 11:49:46

点赞 0 只看TA 引用举报 #1得分 0

⋅推荐个oracle快速创建索引的工具

⋅推荐一个好用的Java开源CMS

⋅videojs插件中间播放按钮怎么显示？

更多帖子

关注私信空间博客

ChengKing

本版专家分：1

微软MVP 2006年4月荣获微软MVP称号
2008年4月荣获微软MVP称号
2007年4月荣获微软MVP称号

蓝花 2005年10月 .NET技术大版内专家分月排行榜第三: 引用楼主 ChengKing 的回复:
官方文档非常简单，没有说明。
目前默认是在下面控制面板中有播放/暂停按钮及其它音量等控制按钮，怎么实现可以在视频区域中间位置显示播放/暂停的大按钮？以方便手机触摸操控。
谢谢

videojs 4.6.3 version，看到代码是确实有定义，但按钮并没有显示出来。它自己的demo.html在ie中有显示，但 chrome中并没有显示。

2014-07-10 08:30:56

点赞 0 只看TA 引用举报 #2得分 0

⋅求一个linq Row_number的写法 ⋅asp.net自定义400错误显示 ⋅已经使用Tls12还是报错The request was aborted: Could not create SSL/TLS secure channel 更多帖子 关注私信空间博客 支付宝加好友偷能量挖 本版专家分：396045 探花 2017年总版技术专家分年内排行榜第三 进士 2018年总版新获得的技术专家分排名前十 2013年总版技术专家分年内排行榜第五 金牌 2018年5月总版技术专家分月排行榜第一 2018年4月总版技术专家分月排行榜第一 2018年2月总版技术专家分月排行榜第一 2017年8月总版技术专家分月排行榜第一 银牌 2018年3月总版技术专家分月排行榜第二 2017年11月总版技术专家分月排行榜第二 2016年2月总版技术专家分月排行榜第二 2014年2月总版技术专家分月排行榜第二 2013年4月总版技术专家分月排行榜第二: chrome 25,firefox12都没问题啊。。

2014-07-10 09:23:51

点赞 0 只看TA 引用举报 #3得分 0

⋅此用户还没有发表过任何帖子

关注私信空间博客

save4me

本版专家分：7481

微软MVP 微软MVP

黄花 2014年9月 Web 开发大版内专家分月排行榜第二

蓝花 2014年10月 Web 开发大版内专家分月排行榜第三
2014年6月 .NET技术大版内专家分月排行榜第三

videojs 4.6.3 version里面提供了居中的css，你用的是这个吗？



/* Optionally center */

.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {

  /* Center it horizontally */

  left: 50%;

  margin-left: -2.1em;

  /* Center it vertically */

  top: 50%;

  margin-top: -1.4000000000000001em;

}

参考: Add an HTML5 video tag to your page.



<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"

  controls preload="auto" width="640" height="264"

  poster="http://video-js.zencoder.com/oceans-clip.png"

  data-setup='{"example_option":true}'>

  ...

</video>

2014-07-10 10:48:21

点赞 0 只看TA 引用举报 #4得分 0

⋅推荐个oracle快速创建索引的工具

⋅推荐一个好用的Java开源CMS

⋅videojs插件中间播放按钮怎么显示？

更多帖子

关注私信空间博客

ChengKing

本版专家分：1

微软MVP 2006年4月荣获微软MVP称号
2008年4月荣获微软MVP称号
2007年4月荣获微软MVP称号

蓝花 2005年10月 .NET技术大版内专家分月排行榜第三

引用 4 楼 save4me 的回复:

videojs 4.6.3 version里面提供了居中的css，你用的是这个吗？



/* Optionally center */

.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {

  /* Center it horizontally */

  left: 50%;

  margin-left: -2.1em;

  /* Center it vertically */

  top: 50%;

  margin-top: -1.4000000000000001em;

}

参考: Add an HTML5 video tag to your page.



<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"

  controls preload="auto" width="640" height="264"

  poster="http://video-js.zencoder.com/oceans-clip.png"

  data-setup='{"example_option":true}'>

  ...

</video>

是这么设置的，但不起作用。

2014-07-10 12:51:55

点赞 0 只看TA 引用举报 #5得分 0

⋅推荐个oracle快速创建索引的工具

⋅推荐一个好用的Java开源CMS

⋅videojs插件中间播放按钮怎么显示？

更多帖子

关注私信空间博客

ChengKing

本版专家分：1

微软MVP 2006年4月荣获微软MVP称号
2008年4月荣获微软MVP称号
2007年4月荣获微软MVP称号

蓝花 2005年10月 .NET技术大版内专家分月排行榜第三: chrome 30版本，运行demo，但没有效果

2014-07-10 12:57:36

点赞 0 只看TA 引用举报 #6得分 0

⋅此用户还没有发表过任何帖子

关注私信空间博客

save4me

本版专家分：7481

微软MVP 微软MVP

黄花 2014年9月 Web 开发大版内专家分月排行榜第二

蓝花 2014年10月 Web 开发大版内专家分月排行榜第三
2014年6月 .NET技术大版内专家分月排行榜第三: 演示代码Chrome版本 34.0.1847.116

2014-07-10 13:37:30

点赞 0 只看TA 引用举报 #7得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 xtlyk19900501 本版专家分：0: 诸位如何给video.js添加清晰度切换键？

2014-08-20 17:07:16

点赞 0 只看TA 引用举报 #8得分 0

⋅谁能修改这段代码就是大牛了 ⋅jQuery Masonry如何按顺序排列图片 ⋅订阅号通过服务号网页静默授权可以获得没有关注的粉丝的openid? 更多帖子 关注私信空间博客 hellochina1233 本版专家分：0: 同问，暂停时要显示按钮啊。。videojs的demo不敢恭维

2014-11-09 12:51:21

点赞 0 只看TA 引用举报 #9得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 qq_21446525 本版专家分：0: 在</video>标签后面，加上<script type="text/javascript" src="你的js文件路径/video.js"></script>

2016-02-27 00:38:21

点赞 0 只看TA 引用举报 #10得分 0

1 2

收藏回复

ChengKing

等级：

: 微软MVP 2006年4月荣获微软MVP称号
2008年4月荣获微软MVP称号
2007年4月荣获微软MVP称号

: 蓝花 2005年10月 .NET技术大版内专家分月排行榜第三

关注私信 TA的帖子

我要发贴

Joomla插件系列1--All Videos: Joomla 播放视频的插件all videos 支持版本：1.5-2.5

HTML5 视频（videos）缩放JavaScript插件: video-resize是一款可以对HTML5 视频（videos）进行缩放的JavaScript插件。插件中设置了不同的响应式断点，并通过插入样式表的方式来修改HTML5视频的显示尺寸。

artistic-videos, 纸张"Artistic style transfer for videos"的Torch 实现.zip: artistic-videos, 纸张"Artistic style transfer for videos"的Torch 实现艺术视频这是基于neural的Torch 实现的实现，基于Justin的https://github.com/jcjohnson/neural-style 。算法允许从一个图像( 比如一幅画) ...

videojs播放rtmp流，测试代码: videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。videojs...

完美背景全屏自适应Jquery插件+DEMO: 国外插件，很多主流全屏网站都是用的这个背景插件，使用简单 If you’re a webdeveloper or designer I am pretty sure you’ve run into the problem of people wanting to have “fullscreen content” or just ...

Finding People in Images and Videos: Finding People in Images and Videos，dalal大神的毕业论文130多页，我打印出一部分看过，理解hog很有用，光流部分还没看。还有另一个人毕业论文，放这里，怕自己以后找不到

Video.js 播放m3u8视频: Video.js 播放m3u8视频 videojs5.hlsjs.js组件播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频

【CVPR-2018】Real-world Anomaly Detection in Surveillance Videos: CVPR 2018论文：真实监控场景中的异常事件检测安防作为近年最热门的计算机视觉研究落地方向，与视频分析研究有着很紧密的关系。在真实的监控视频中，一个常见的需求就是要自动识别视频流中的异常事件，也就是异常...

Foreground Object Detection from Videos Containing Complex Background: Foreground Object Detection from Videos Containing Complex Background

Android代码-在RecyclerView中，实现Tumblr的滑动到自动播放视频效果。: This library is created with the purpose to implement recyclerview with videos easily. It is targeted at solving following problems: Flicker when scrolling. Lag or skipping frames when video starts. ...

unity Behavior Designer 1.5.10 AI专用插件: - Extensive documentation and videos - Sample projects available online - And more Addon Packs: - Formations Pack - Movement Pack - Tactical Pack Complete Projects: - Deathmatch AI Kit Third Party ...

MFCVideo视频播放: MFCVideo视频播放代码完整简洁无任何错误。亲测有效。

XDM_chrome.crx: 类似与IDM的免费网络高速下载器，这个是chrome 浏览器中安装的插件 Platform File Type Size Pre-requisites Windows xdmsetup-2018.msi Windows Installer 36 MB None Linux 64 bit xdm-2018-x64.tar.xz Linux ...

Videos Library.tvlibrary.zip: Videos Library.tvlibrary.zip

Finding People in Images and Videos Navneet Dalal: Navneet Dalal的博士论文。比较长，150页。

Moving Object Detection and Tracking in Videos: Moving Object Detection and Tracking in Videos,Spring 2013

A media player playing videos from video sites..zip: A media player playing videos from video sites..zip,播放优酷网和其他视频网站视频的视频播放器。

Behavior Designer v1.5.10 AI制作插件: - Extensive documentation and videos - Sample projects available online - And more Addon Packs: - Formations Pack - Movement Pack - Tactical Pack Complete Projects: - Deathmatch AI Kit Third Party ...

paypal-checkout, PayPal按钮和PayPal结帐的Javascript集成.zip: paypal-checkout, PayPal按钮和PayPal结帐的Javascript集成 PayPal 一组组件可以轻松集成PayPal按钮和贝宝签入到你的网站，由的XComponent服务。 HowTo Videos try it in our Demo App Learn more in our

postman1.0.11 离线版本绿色版: 201503最新版本离线包。安装：打开chrome -》菜单-》更多工具 -》扩展程序 -》勾选“开发者模式”。加载正在开发的程序＝》选中解压的目录。安装全后，在chrome应用列表中可以看到。（在chrome中新建页面-》左上角应用）

相关热词 c# cad插入影像 c#设计思想 c#正则表达式转换 c#form复制 c#写web c# 柱形图 c# wcf 服务库 c#应用程序管理器 c#数组如何赋值给数组 c#序列化应用目的博客园

我们是很有底线的