- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
当执行代码时,videoJS
plugin 取代了 HTML5
视频播放器,真的很高兴,我说了我之间的成就。
但是当点击下一个视频时,即使返回第一个视频,插件也丢失了,让我使用HTML5
可以在jsfiddle中查看或在这里:
$(document).ready(function() {
function insertar_contenido(vid, elemento) {
var contenido, fuente
var url = elemento.attr("href")
var ext = "mp4"
var formato = ext
var es_video = new RegExp("^.+\\." + ext + "$").test(url)
var cargando = $('.loading')
function mostrar() {
cargando.fadeIn(200)
}
function ocultar() {
cargando.fadeOut(100)
}
mostrar()
var cuadro = vid.find(".cuadro")
if (cuadro.length != 0) {
$("#ocultado").append(cuadro)
}
if (es_video) {
var json = {"aspectRatio":"640:267", "playbackRates": [1, 1.5, 2]};
contenido = $(document.createElement("video"))
fuente = $(document.createElement("source"))
fuente.attr("src", url)
fuente.attr("type", "video/" + formato)
contenido.attr("controls", true)
contenido.attr("autoplay", true)
contenido.attr("class","video-js")
contenido.attr('data-setup', JSON.stringify(json));
contenido.on('waiting', mostrar)
contenido.on('canplay', ocultar)
contenido.append(fuente)
} else {
var id = elemento.attr("id")
if (id == undefined) {
contenido = $(document.createElement("iframe"))
contenido.attr("src", url)
contenido.on('load', ocultar)
} else {
contenido = $(document.createElement("div"))
contenido.append($("#c_" + id))
ocultar()
}
}
vid.html("")
vid.append(contenido)
$("#enlaces a").removeClass("playing")
elemento.addClass("playing")
}
var indice = 0
var vid = $('#myvid')
var primer_elemento = $("#enlaces a:first")
var enlaces = $("#enlaces a").map((x, y) => {
return {
a: x,
b: y
}
})
insertar_contenido(vid, primer_elemento)
primer_elemento.addClass("playing")
$("#enlaces a.link").on("click", function(event) {
event.preventDefault()
var esto = $(this)
indice = enlaces.filter((x, y) => y.b == this)[0].a
insertar_contenido(vid, esto)
})
$("#atras").on("click", function(event) {
event.preventDefault()
var esto = $(this)
--indice
if (indice < 0) {
indice += enlaces.length
}
enlaces[indice].b.click()
})
$("#siguiente").on("click", function(event) {
event.preventDefault()
var esto = $(this)
++indice
if (indice >= enlaces.length) {
indice -= enlaces.length
}
enlaces[indice].b.click()
})
})
#myvid {
color: #ffff;
}
.container * {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.container *::after,
.container *::before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h2.title {
font-size: 24px;
color: #fff;
font-weight: bold;
text-align: center;
padding: 2em;
display: block;
margin: auto;
background-color: #A97A7A;
}
.container {
width: 960px;
background: #010101;
margin: auto;
position: relative;
height: 550px;
}
.vidcontainer {
width: 75%;
height: 100%;
float: right;
position: relative;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
font-size: 20px;
}
.videolist {
float: right;
width: 25%;
background-color: rgb(76, 76, 76);
height: 100%;
position: relative;
}
.vids {
margin: 5px;
background-color: #292626;
max-height: 450px;
border: 1px solid #616060;
overflow-y: scroll;
list-style: none;
direction: rtl;
}
.vids::-webkit-scrollbar {
width: 5px;
background-color: #8A8A8A;
border: 1px solid #AFACAC;
}
.vids::-webkit-scrollbar-thumb {
background-color: #FF8D00;
border-radius: 5px;
}
.vids::-webkit-scrollbar-thumb:hover {
background-color: #fff;
}
.vids::-webkit-scrollbar-thumb:active {
background-color: #ccc;
}
.vids a {
text-decoration: none;
color: #fff;
font-size: 16px;
display: block;
border-bottom: 1px solid #616060;
padding: 8px 5px;
margin: 5px;
}
/* --- controllers --- */
.controllers {
position: absolute;
bottom: 0;
height: 50px;
background-color: #fff;
width: 100%;
}
.controllers button {
border: 1px solid #E7E7E7;
background-color: #FFFFFF;
color: #777;
height: 40px;
width: 40px;
border-radius: 50%;
margin: 5px;
box-shadow: 1px 1px 3px #4C4C4C;
outline: none;
font-size: 18px;
display: inline-block;
float: left;
}
.controllers button:focus {
box-shadow: 1px 0px 7px #4C4C4C;
border-color: #ff8d00;
color: #ff8d00;
background-color: #4C4C4C;
}
.btnPlay::after {
content: "\f04b";
font-family: 'FontAwesome';
}
.paused::after {
content: "\f04c";
}
.sound::after {
content: "\f027";
font-family: 'FontAwesome';
}
.sound2:after {
content: "\f028";
}
.muted::after {
content: "\f026";
}
.btnFS::after {
content: "\f065";
font-family: 'FontAwesome';
}
.ads {
height: 350px;
width: 350px;
position: absolute;
background-color: #777;
top: 27.5px;
right: 40px;
z-index: 11;
}
.bigplay {
height: 150px;
width: 150px;
position: absolute;
top: 127.5px;
left: 85px;
z-index: 11;
color: #fff;
font-size: 150px;
line-height: 150px;
text-align: center;
cursor: pointer;
text-shadow: 0px 0px 15px #ff8d00;
}
.closeme {
height: 32px;
width: 32px;
background-color: #fff;
top: -10px;
right: -10px;
border: 1px solid #ff8d00;
display: block;
position: absolute;
border-radius: 50%;
text-align: center;
line-height: 30px!important;
color: #ff8d00;
font-size: 25px!important;
}
.playing {
background-color: #999;
border: 1px solid #ff8d00!important;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.playing:after {
content: "\f01d";
font-family: 'FontAwesome';
color: #ff8d00;
float: left;
}
/* PROGRESS BAR CSS */
.topControl {
position: absolute;
display: block;
width: 100%;
bottom: 50px;
background-color: #fff;
z-index: 1;
}
/* Progress bar */
.progress {
width: 100%;
height: 5px;
position: relative;
float: left;
cursor: pointer;
background: #999;
}
.progress span {
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.timeBar {
z-index: 10;
width: 0;
background: #ff8d00;
}
.bufferBar {
z-index: 5;
width: 0;
background: #eee;
}
/* time and duration */
.time {
width: 12%;
float: right;
text-align: center;
font-size: 11px;
line-height: 12px;
right: -12%;
opacity: 0;
position: absolute;
}
.topControl:hover .time {
right: 0;
opacity: 1;
}
.topControl:hover .progress {
width: 88%;
height: 12px;
}
/* VOLUME BAR CSS
volume bar */
.volume {
position: relative;
cursor: pointer;
width: 70px;
height: 10px;
float: left;
margin-top: 20px;
margin-right: 15px;
background-color: #999;
}
.volumeBar {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ff8d00;
z-index: 10;
}
.loading {
width: 100%;
background-color: rgba(255, 141, 0, 0.5);
height: 100%;
position: absolute;
top: 0;
}
i.fa.fa-spinner.fa-spin {
height: 60px;
width: 60px;
font-size: 60px;
color: #fff;
text-shadow: 0px 0px 8px #000;
top: 172.5px;
left: 330px;
position: absolute;
}
.disabled {
pointer-events: none;
cursor: not-allowed;
background-color: #C2C2C2!important;
}
ul.speedcnt {
display: none;
position: absolute;
right: 30px;
bottom: 60px;
background-color: #fff;
border-radius: 5px;
list-style: none;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
ul.speedcnt li {
text-align: center;
font-family: 'verdana', tahoma, serif;
font-size: 13px;
padding: 5px 20px;
cursor: pointer;
display: block;
border-bottom: 1px solid #ccc;
}
ul.speedcnt li:last-child {
border-bottom: none;
}
ul.speedcnt li.selected {
background-color: rgba(255, 141, 0, 0.6);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--<link rel="stylesheet" type="text/css" href="https://vjs.zencdn.net/5-unsafe/video-js.css">-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://vjs.zencdn.net/5-unsafe/video.js"></script>-->
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<div class="container">
<div class="vidcontainer">
<div id="myvid"></div>
<div class="loading">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
<div class="videolist">
<nav class="vids">
<a id="atras" href="#">Back</a>
<a id="siguiente" href="#">Next</a>
</nav>
<nav id="enlaces" class="vids">
<a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test1</a>
Y<a clases="link" href="https://www.wikipedia.org">test web</a>
<a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test2</a>
<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test3</a>
<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test4</a>
<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">test5</a>
</nav>
<div id="ocultado" style="display: none">
<div class="cuadro" id="c_link_10">Content</div>
</div>
</div>
</div>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
我认为 videoJS
plugin videoJS
不适用于同一页面上的多个视频,但实际上如果它适用于此处的多个视频测试:https://jsfiddle.net/bq81phfy/
所以我能想到的是,一个可能的解决方案是通过切换到下一个视频或返回到上一个来同时运行 videoJS
plugin视频。
我的问题:如何让插件的库运行? O 如何使插件适用于所有视频?
最佳答案
(修改后的答案)
完整代码和demo,可以查看我的Fiddle here .
我的做法是这样的:
所有视频链接只有一个 video
元素。
当显示非视频内容时,video
被隐藏。
显示视频时,会移除非视频内容。
你可以从下面的代码中看到我更改/添加的内容:
(...
表示您的代码,那里没有任何更改。)
$(document).ready(function() {
function insertar_contenido(vid, elemento) {
...
contenido = vid.find('video:first');
var videojs = contenido.closest('.video-js');
var exists = videojs.length >= 1;
if (es_video) {
if (exists) {
vid.children('.non-video').remove();
videojs.show();
fuente = contenido.children('source');
fuente.attr('src', url);
fuente.attr('type', 'video/' + formato);
contenido.attr('src', url);
contenido.get(0).load();
} else {
...
vid.html('');
vid.append(contenido);
}
} else {
if (exists) {
videojs.hide();
}
...
contenido.addClass('non-video');
vid.append(contenido);
}
...
}
...
});
实际上,对于内联内容,该元素最初应该是隐藏的:
<div id="c_inline-1" style="display: none">
<h3>Inline Content</h3>
<p>Content goes here.</p>
</div>
为此,我将 contenido.append($("#c_"+ id))
更改为:
contenido.append($("#c_" + id).html())
演示 here .
或者,如果您更愿意为每个视频使用新的 video
元素,那么只需 call videojs()
在创建的 video
元素上。只需在您的 original code 中的 vid.append(contenido)
之后 添加这些行:
if (es_video) {
videojs(contenido.get(0));
}
演示 here .
我添加了这个:
// If clicking on the same link, do nothing.
if (vid.data('elemento') === elemento.get(0)) {
return;
}
vid.data('elemento', elemento.get(0));
还有这个:
// .non-video are always re-created.
vid.children('.non-video').remove();
到 insertar_contenido()
函数,它应该可以解决这个问题:“多次单击列表 iFrame
和 Inline< 的标题
。相同内容的点击次数翻倍。”。
演示 here .
关于jquery - 更改视频时如何运行插件/库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55545692/
Java 库和 android 库有什么区别,各自有什么优点/缺点? 最佳答案 您可以在 Android 应用程序中包含标准 Java .jar 文件库。它们在 .apk 构建时被翻译成 Dalvik
所以,我现在的代码就像从 Java 层加载库(比如 liba.so),并在内部 liba.so 加载 libb.so。因此,如果我必须将所有库打包到 APK 中并将其安装在没有 root 访问权限的设
我想在我的系统中设置 LEDA 库。 我已经从以下链接下载了 LEDA 库 http://www.algorithmic-solutions.info/free/d5.php Instruct
我想用 autoconf 创建一个共享库。但是,我希望共享库具有“.so”扩展名,而不是以“lib”开头。基本上,我想制作一个加载 dlopen 的插件。 .是否有捷径可寻? 当我尝试使用 autoc
我需要在 Apps 脚本应用程序上修改 PDF。为此,我想使用 JS 库:PDF-LIB 我的代码: eval(UrlFetchApp.fetch("https://unpkg.com/pdf-lib
我正在构建一个使用以下 Boost header 的程序(我使用的是 Microsoft Visual C++ 10), #include #include #include #include
当我通过 cygwin 在 hadoop 上运行此命令时: $bin/hadoop jar hadoop-examples-*.jar grep input output 'dfs[a-z.]+' 我
我已经通过 vcpgk 成功安装了一个 C++ 库,名为:lmdb:x64-windows 我还安装了lmdb通过 Cabal 安装的 Haskell 绑定(bind)包 在尝试测试 lmdb 包时:
我该如何解决这个问题? 我刚刚将 javacv jar 文件复制到我的项目 Lib 文件夹下,但出现了这个错误! 我可以找到这个thread来自谷歌,但不幸的是,由于我国的谷歌限制政策,该页面无法打开
我有一个 Android 库项目 FooLib。 FooLib 引用 Android Context 之类的东西,但不需要任何资源文件(res/ 中的东西)所以我目前将其打包为供我的应用使用的 JAR
我正在开发一个 Android 应用程序(使用 Android Studio),它能够通过手势识别算法了解您正在进行的 Activity 。对于我使用 nickgillian ithub 帐户上可用的
关于从 .NET Framework 项目中引用 .NET Standard 类库的问题有很多类似的问题,其中 netstandard 库中的 NuGet 包依赖项不会流向 netframework
我已经从互联网上下载了 jna-4.2.2.jar,现在想将这个 jar 导入到我的项目中。但是当我试图将这个 jar 导入我的项目时,出现以下错误。 [2016-06-20 09:35:01 - F
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是,我想安装所有功能。为此,它需要一些库,此处 ( https://download.samba.org/pub/rsync/INSTA
进入 Web 开发有点困难。过去 5 年我一直致力于 winforms 工作。所以我正在努力从一种切换到另一种。前段时间,我使用过 JavaScript,但现在还没有大量的 JavaScript 库
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我正在寻找一个用Python编写的与logstash(ruby + java)类似的工具/库。 我的目标是: 从 syslog 中解析所有系统日志 解析应用程序特定日志(apache、django、m
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我花了几天时间试图寻找用于 JavaPOS 实现的 .jar 库,但我找不到任何可以工作的东西。我找到了很多像这样的文档:http://jpos.1045706.n5.nabble.com/file/
这个问题在这里已经有了答案: Merge multiple .so shared libraries (2 个答案) 关闭 9 年前。 我有我在代码中使用的第三方库的源代码和对象。该库附带有关如何使
我是一名优秀的程序员,十分优秀!