Click here to Skip to main content
15,937,012 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>

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>


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")
     })
 })
Posted
Updated 3-Nov-18 7:13am

1 solution

Ok i figured out this one after few hours of trying. Its problem with movieurl. When i change movieurl in something alse, for example title, than it sudenly works. I dont know is it good way to do this but it works :)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900