如何在laravel中使用javascript在模式弹出中播放动态视频



这是我的javascript,这没有显示任何视频,只是空白。我是laravel和javascript的新手。希望你能帮我完成这项任务。谢谢

<script>
//open modal and play video          
$('#myModal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget)
var name = button.data('name')
var link = button.data('link')
var modal = $(this)
modal.find('.modal-content #name').val(name);                    
modal.find('.modal-content #playvideo').val($("#playvideo").attr('src', link););                    
})
//close modal and stop play video
$("#myModal").on('hide.bs.modal', function(){
$("#playvideo").attr('src', '');
});            
</script>

模态

<iframe id="playvideo" src="" frameborder="0" allowfullscreen></iframe>

按钮

<a data-link="{{ $vid->link }}" data-name="{{ $vid->name }}" class="fa fa-eye btn btn-alt-success" data-target="#myModal" data-toggle="modal"></a>

请看另一个。我确信这是正确的解决方案

$(document).on('click','.view-video',function(){
console.log($(this).attr('data-link'));
$('#myModal').modal();
$("#playvideo").attr('src', $(this).attr('data-link'));
})  

请看一下这个片段。如果不起作用,请转到链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
</style>
<script>
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');

/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});

/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>     
</body>
</html>

最新更新