循环播放模态视频

时间:2019-03-21 22:38:37

标签: jquery laravel for-loop bootstrap-modal

我正在寻找有关如何循环播放视频的指南。我正在使用Laravel,Bootstrap和jQuery。

这是我的控制人

public static function getLessonvideo($id)
{
    $url = Lesson::where('id', $id)->value('video_link');

    return LaravelVideoEmbed::parse($url);
}

这是我在其中穿行的刀片

@foreach($course->activeLessons as $lesson)
    <article class="lesson">
        {!! $loop->iteration!!}. <a href="{{route('learn.show', $lesson->id)}}"></a>
        <div class="body" id="title"> {!! $lesson->title!!}</div>
        <p> {!! $lesson->short_description !!}</p>

        <div class="interaction">
            <button class="btn btn-primary"
                    data-video="{{\App\Http\Controllers\EmployeeCoursesController::getLessonvideo($lesson->id)}}"
                    data-toggle="modal" data-target="#videoModal">Play Video
            </button>
        </div>
    </article>
@endforeach

这是我的模态在同一把刀片上

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <video controls width="100%">
                    <source src="" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</div>

这是我的Js

$(function () {
    $(".video").click(function () {
        var theModal = $(this).data("target"),
            videoSRC = $(this).attr("data-video"),
            videoSRCauto = videoSRC + "";
        $(theModal + ' source').attr('src', videoSRCauto);
        $(theModal + ' video').load();
        $(theModal + ' button.close').click(function () {
            $(theModal + ' source').attr('src', videoSRC);
        });
    });
});

如果您有任何想法请告诉我。预先感谢。

0 个答案:

没有答案