Jquery视频播放列表在移动设备上工作 [英] Jquery video playlist donsent work on mobile

问题描述

我有视频播放列表在计算机上运行良好，但是当我在手机上试用时，没有任何效果。

如果我把静态视频网址放在这个标签中这样：

I have video playlist which work good on computer but when i try it on mobile, nothing works.
If i put static video url in this tags like this:

<video src="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4" class="embed-responsive-item" controls="controls"> Your browser does not support HTML5 video. </video>

比它有效。所以我认为它与jquery的问题。



我遵循了这个例子： HTML5 - 视频播放列表 - JSFiddle [ ^ ]



我尝试了什么：



这是我的HTML：

than it works. So i think its problem with jquery.

I have followed this example: HTML5 - Video Playlist - JSFiddle[^]

What I have tried:

This is my HTML:

<section class="free-video py-2 pb-5">
    <div class="navbar">
        <a class="navbar-brand" href="/">
            <img src="/Images/logo.png" width="100" height="79" alt="">
        </a>
    </div>
    <div id="playlist" class="container text-center">
        <div class="row d-xs-none my-5">
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2" style="">
                        <div class="row justify-content-center">
                            <div class="col-md-12 col-9 d-flex flex-column">
                                <p class="lead">VIDEO 1</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2">
                        <div class="row justify-content-center">
                            <div class="d-flex  col-md-12 flex-column col-9">
                                <p class="lead">VIDEO 2</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-4 p-sm-2 p-md-3 my-1">
                <div class="card border border-primary link" movieurl="/media/1001/nature-beautiful-short-video-720p-hd-720p.mp4">
                    <div class="card-body p-sm-2">
                        <div class="row justify-content-center">
                            <div class="d-flex  col-md-12 flex-column col-9">
                                <p class=" lead">VIDEO 3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-6 col-sm-8 col-12">
                <div class="embed-responsive embed-responsive-16by9"> <video id="videoarea" src="" class="embed-responsive-item" type="video/mp4" controls="controls"> Your browser does not support HTML5 video. </video> </div>
            </div>
        </div>
    </div>
</section>

这是javascript：

This is javascript:

$(function () {
     $("#playlist .link").on("click", function () {
         $("#videoarea").attr({
             "src": $(this).attr("movieurl"),
             "poster": "",
             "autoplay": "autoplay"
         })
     })
     $("#videoarea").attr({
         "src": $("#playlist .link").eq(0).attr("movieurl"),
         "poster": $("#playlist .link").eq(0).attr("moviesposter")
     })
 })

推荐答案

（function（）{

(function () {

（＃playlist .link）。on（click ，function（）{

("#playlist .link").on("click", function () {

（＃videoarea）。attr（{
src：

("#videoarea").attr({ "src":

这篇关于Jquery视频播放列表在移动设备上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！