Question

我在应用程序ruby中使用Materialize on rails并希望视频停止关闭模式Materialise。请帮帮我。

<% @chapter.episode.each do |episode| %>
    <a class="btn modal-trigger" href="#<%= episode.name %>"><%= episode.name %></a>
  <div id="<%= episode.name %>" class="modal">
    <i id="close" title="Cerrar" class=" modal-action modal-close waves-green right material-icons">close</i>
    <div class="modal-content">
        <video id="<%= episode.name %>"  width="320" height="240" controls>
        <source id="<%= episode.name %>" src="<%= episode.url %>" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
        Your browser does not support the video tag.
        </video>
    </div>
  </div>
<% end %>

Answer 1

首先，您要为多个代码id，div，video设置相同的source。 ID必须在整个文档中是唯一的考虑到你想在模态关闭时停止视频，你可以在你的Javascript / jQuery代码中使用回调完成事件（模态关闭）：

$(document).ready(function(){
    var videos = $("video");

    $('.modal-trigger').leanModal({
        complete: function() {
            videos.each(function(){
                this.pause();
            });
        }
    });
});

当模态关闭时，这将暂停所有视频。

Answer 2

我知道这是一个古老的问题，但这是我寻找的结果。通过在打开时将视频添加到模式中，然后在关闭时将其删除，我解决了该问题。这是我的工作。

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

<select class="js-example-basic-multiple" name="category []" multiple="multiple">
   @foreach($category as $item)
       <option value="{{$item->id}}" {{ in_array($selected, $item->id) ? 'selected' :'' }}>{{$item->name}}</option>
    @endforeach
</select>

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

html

$(document).on('click','.video-butt',function(){
    $('#video-modal .video-container').html('<iframe id="myIframe" width="300" height="200" src="' + $(this).attr('href') + '?rel=0" allowfullscreen="true" ></iframe>'); // embed video
    $('#video-modal').modal('open');
    return false;
})
function videoTrash(){ //remove video embed on close
    $('#video-modal .video-container').empty();
}
$('#video-modal').modal({onCloseEnd:videoTrash}); // initialize materialize modal

触发链接

<div id="video-modal" class="modal black">
    <div class="modal-content white-text">
        <div class="video-container"></div>
    </div>
</div>

使用jquery在关闭模态Materialize上停止视频html5

2 个答案: