换视频时如何运行插件/库?
How to run plugin / library when changing video?
执行代码时,videoJS
插件 替换了 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
插件 videoJS
不适用于同一页面上的多个视频,但实际上如果它适用于此处的多个视频测试:https://jsfiddle.net/bq81phfy/
所以我能想到的是,一个可能的解决方案是通过切换到下一个视频来同时 运行 videoJS
plugin或返回上一个视频。
我的问题:如何将插件的库获取到 运行? O 如何使 插件 适用于所有视频?
(修改后的答案)
完整代码和demo,可以查看我的Fiddle here.
而我的做法如下:
所有视频链接只有一个 video
元素。
当显示non-video内容时,video
被隐藏。
显示视频时,non-video内容被删除。
你可以从下面的代码中看到我changed/added:
(...
表示您的代码,那里没有任何更改。)
$(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.
更新 2
或者,如果您希望为每个视频使用新的 video
元素,则只需 call videojs()
on the created video
element. Just add these lines after the vid.append(contenido)
in your original code:
if (es_video) {
videojs(contenido.get(0));
}
演示 here.
更新 3
我添加了这个:
// 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.
执行代码时,videoJS
插件 替换了 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
插件 videoJS
不适用于同一页面上的多个视频,但实际上如果它适用于此处的多个视频测试:https://jsfiddle.net/bq81phfy/
所以我能想到的是,一个可能的解决方案是通过切换到下一个视频来同时 运行 videoJS
plugin或返回上一个视频。
我的问题:如何将插件的库获取到 运行? O 如何使 插件 适用于所有视频?
(修改后的答案)
完整代码和demo,可以查看我的Fiddle here.
而我的做法如下:
所有视频链接只有一个
video
元素。当显示non-video内容时,
video
被隐藏。显示视频时,non-video内容被删除。
你可以从下面的代码中看到我changed/added:
(...
表示您的代码,那里没有任何更改。)
$(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.
更新 2
或者,如果您希望为每个视频使用新的 video
元素,则只需 call videojs()
on the created video
element. Just add these lines after the vid.append(contenido)
in your original code:
if (es_video) {
videojs(contenido.get(0));
}
演示 here.
更新 3
我添加了这个:
// 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.