You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.6 KiB
76 lines
2.6 KiB
@section('css') |
|
@parent |
|
<style> |
|
.modal-xl { |
|
max-width: 1140px; |
|
} |
|
|
|
</style> |
|
|
|
@stop |
|
|
|
@section('js') |
|
@parent |
|
<script> |
|
function videoPopUp(element) { |
|
// url = element.getAttribute("data-vdoPath"); |
|
// video = document.getElementById("showPopVideo"); |
|
// video.load(); |
|
// fetchVideoAndPlay(url); |
|
let src = element.getAttribute("data-vdoPath") |
|
document.getElementById("showPopVideo").getElementsByTagName("source")[0].src = src |
|
document.getElementById("download_vdo").href = src; |
|
document.getElementById("download_vdo").download = src.split('*')[src.split('*').length-1]; |
|
|
|
document.getElementById("showPopVideo").load(); |
|
document.getElementById("showPopVideo").play(); |
|
|
|
|
|
} |
|
function fetchVideoAndPlay(url) { |
|
fetch(url) |
|
.then(response => response.blob()) |
|
.then(blob => { |
|
video.srcObject = blob; |
|
return video.play(); |
|
}) |
|
.then(_ => { |
|
// Video playback started ;) |
|
}) |
|
.catch(e => { |
|
// Video playback failed ;( |
|
}) |
|
} |
|
</script> |
|
@stop |
|
<!-- Modal --> |
|
<div class="modal fade" id="vdoPop" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" |
|
aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered modal-xl" role="document"> |
|
<div class="modal-content"> |
|
{{-- <div class="modal-header"> |
|
<h5 class="modal-title">Modal title</h5> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true">×</span> |
|
</button> |
|
</div> --}} |
|
<div class="modal-body text-center"> |
|
<video controls id="showPopVideo" style="max-width:100%"> |
|
<source type="video/mp4"> |
|
</video> |
|
</div> |
|
<div class="modal-footer"> |
|
<a id="download_vdo" class="btn btn-primary" href="" download>下載</a> |
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{{-- <div id="vdoPop" class="modal" onclick="this.style.display='none'"> |
|
<span class="close">× </span> |
|
<div class="modal-content"> |
|
<video controls id="showPopVideo" style="max-width:100%"> |
|
<source type="video/mp4"> |
|
</video> |
|
</div> |
|
</div> --}}
|
|
|