javascript - 嵌入式视频未以模式打开
问题描述
我正在尝试以模式打开我的视频。我正在使用 javascript 创建按钮,在 click 方法上我想用嵌入的 youtube 视频打开模式,但我不断收到 404 错误。我的错误是什么:
我的 json 中有视频 ID,并从那里调用视频 ID。包含表格的模态应该使用 youtube 视频调用另一个模态
我的代码:
HTML:
<div class="modal" tabindex="-1" role="dialog" id="drilldown">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left"></h5>
<div class="pull-right">
<a class="close" data-dismiss="modal" aria-label="Close" style="cursor: pointer;">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</a>
</div>
</div>
<div class="modal-body">
<div class="spin-wrapper">
<div class="spinner"></div>
</div>
<table id="table" class="table table-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Youtube</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
JavaScript
json.forEach(elem => {
elem.youtube = `<a class="vl" id="${elem.video_id}" data-toggle="modal" data-src="https://www.youtube.com/embed/${elem.video_id}?autoplay=1" data-target="#myModal"><i class="fab fa-youtube"></i></a>
</a>`;
});
let table = $('#table').DataTable({
data: json,
columns: [{
data: 'date'
}, {
data: 'name'
}, {
data: 'youtube'
}]
});
});
let $videoSrc;
$('.vl').click(function() {
console.log(this);
$videoSrc = $(this).data("src");
// console.log($videoSrc);
});
$('#myModal').on('shown.bs.modal', function(e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#video").attr('src', $videoSrc);
})
当我单击模式时,我收到 404 错误。
解决方案
以下将起作用,但您不能在此处执行此操作,因为 YouTube 视频会触发跨站点警告。
与https://youtube.com/上的跨站点资源关联的 cookie设置为没有该
SameSite
属性。未来版本的 Chrome 将仅提供带有跨站点请求的 cookie,前提是它们设置SameSite=None
为Secure
我在这里创建了一个工作演示:https ://jsfiddle.net/MrPolywhirl/5xyetqw2/
let json = [{
date: '2019-04-30',
name: 'Stack Overflow for Teams - Q&A in a Private and Secure Environment',
video_id: 'HJtJXMKpl2g'
}, {
date: '2019-06-04',
name: 'Stack Overflow Talent - The Best Way to Hire Developers',
video_id: 'PMDmo4SaP1s'
}, {
date: '2019-07-19',
name: 'Stack Overflow for Teams - Share Knowledge & Drive Productivity',
video_id: 'wmzBz5WSEls'
}];
var $videoSrc = null;
json.forEach(elem => {
elem.youtube = $('<a>', { id: elem.video_id, class: 'video_link' })
.attr('data-toggle', 'modal')
.attr('data-src', `https://www.youtube.com/embed/${elem.video_id}`)
.attr('data-target', '#video-modal')
.append($('<i>').addClass('fab fa-youtube'))[0].outerHTML;
});
let table = $('#video-table').DataTable({
data: json,
columns: [{
title: 'Date',
data: 'date'
}, {
title: 'Title',
data: 'name'
}, {
title: 'Link',
data: 'youtube'
}]
});
$('#toggle-modal-btn').on('click', function(e) {
$('.modal').first().modal('toggle');
});
$('#toggle-modal-btn').trigger('click'); // Show the table modal
$('.video_link').click(function(e) {
$videoSrc = $(this).data('src'); // Update the video source
});
$('#video-modal').on('shown.bs.modal', function(e) {
$("#video-frame").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
});
$('#video-modal').on('hide.bs.modal', function(e) {
$("#video-frame").attr('src', $videoSrc);
});
.video_link i {
color: red;
cursor: pointer;
}
#toggle-modal-btn {
display: block;
width: 8em;
height: 2.5em;
margin: 0 auto;
margin-top: calc(50vh - 2.5em);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<button id="toggle-modal-btn">Show Modal</button>
<div class="modal" tabindex="-1" role="dialog" id="drilldown">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pull-left"></h5>
<div class="pull-right">
<a class="close" data-dismiss="modal" aria-label="Close" style="cursor: pointer;">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</a>
</div>
</div>
<div class="modal-body">
<div class="spin-wrapper">
<div class="spinner"></div>
</div>
<table id="video-table" class="table table-sm table-hover"></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video-frame" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- sql - 如果列不包含另一列的 ID,则创建行
- java - 我怎样才能得到正确的平均分和成绩?
- ios - 辅助功能将焦点设置到导航栏标题项
- progressive-web-apps - Android 上的 PWA:用时钟隐藏顶部栏?
- java - Java 中的 Kafka 生产者错误
- jquery - 无法使用 jQuery 在上一个跨度内获取链接 ID
- assembly - 在 x86 架构中更改指令的操作码是否可能,或者有多难?
- c++ - 想知道我在这个程序中做错了什么?
- java - Keycloak:检索所有可用的客户端会话
- android - Kotlin 1.2.50 要求 baseFeatureInfoDir