0

I'm using the videojs-playlist plugin on top of video.js to play multiple videos on my page. The names of the videos show up, but when I click on the name, it doesn't change the video. Any help would be appreciated. My code is:

<div class="tab-pane" id="product-video">
    <div class="embed-responsive embed-responsive-16by9">
    <video id="video-playlist" controls preload="metadata"
        poster="https://d1gajuxrsak92a.cloudfront.net/uploads/works/0fe589a84faf71cc83088638937e0456c007f39c/icon/1280Screen%20Shot%202014-09-27%20at%2011.46.35%20PM.jpg" class=" video-js vjs-default-skin" >
        <!--source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" type="application/vnd.apple.mpegurl" /-->
        <source src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.mp4' type="video/mp4">
        <source src="https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.webm" type="video/webm">
        <source src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2.ogv' type="video/ogv">
        </video>
    </div>
    <div id="video-playlist-vjs-playlist" class='vjs-playlist' style='width:100%'>
        <ul>
            <li >
                <a class='vjs-track' href='#episode-0' data-index='0' data-src='https://s3.amazonaws.com/onarbor-previews/uploads/works/7aba13a97d304182e277ca2bdd56c9145678af37/v1/OnarborWriteReviewDemo2'><!--//note in the data-src's above that there are no file extensions, e.g., .m4v-->
                First Casting</a>
            </li>
            <li >
                <a class='vjs-track' href='#episode-1' data-index='1' data-src='https://s3.amazonaws.com/onarbor-previews/uploads/works/3e1f75623064a8aa45bcd66e01f65e1e27736960/v1/onarborScreencast6'><!--//note in the data-src's above that there are no file extensions, e.g., .m4v-->
                Second Casting</a>
            </li>
        </ul>
    </div>
</div>

Here is the GitHub for the plugin: https://github.com/tim-peterson/videojs-playlist.

Here is a demo of the plugin for those interested: http://tim-peterson.github.io/videojs-playlist/.

박무군
  • 35
  • 5
maahd
  • 672
  • 2
  • 9
  • 30
  • are there any errors shown in your console? could you provide a working example for us to look at, as it seems like the markup you pasted is the exact same as the one in the demo you linked. – GNi33 Apr 15 '15 at 10:21
  • Yes there is one error: "chrome-extension://ifalmiidchkjjmkkbkoaibpmoeichmki/bower_components/jquery/dist/jquery.min.map Failed to load resource: net::ERR_FILE_NOT_FOUND". Here is a working example: https://github.com/tim-peterson/videojs-playlist/zipball/master. – maahd Apr 15 '15 at 10:28
  • sorry, I phrased that poorly there. with "working example" I'm talking about an example on a page like [jsFiddle](http://jsfiddle.net) where we can see what you are experiencing. So an example with your code that _doesn't_ work – GNi33 Apr 15 '15 at 10:32
  • as for this error, this should not be the problem here, see this questions for clearing things up (http://stackoverflow.com/questions/18365315/jquerys-jquery-1-10-2-min-map-is-triggering-a-404-not-found) – GNi33 Apr 15 '15 at 10:34
  • Thanks for the clarification. I was like what does he mean by "working example". And yeah now I remember, I read about the jquery.min.map error. It's nothing serious. – maahd Apr 15 '15 at 10:59
  • Here is my js fiddle: http://jsfiddle.net/3ad9q74p/. I couldn't include the entire html.erb page, because it depends on ruby code and wouldn't load without it. – maahd Apr 15 '15 at 11:00

0 Answers0