SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing multiple sources of source within video tag

    Hello,

    I am using the videojs plugin to add a video player to my site (http://videojs.com/). I have multiple videos on the same page that when the user clicks i want to display in the video player. I have not put the links in <li> tags they are simple <a> tags.

    When I click on the link i want it to update the player with the new video. From what i can work out i need to do this on the onclick event. However, i need it to be able to update multiple sources within the <video> tag because each browser reads a different file (because onbviously they do not all support the same format)

    I have made this work successfully for updating one of the sources, but can't make it work for more the others.... can anyone help?

    This is the code i have been using for the video player:

    Code:
    <video id="video" class="video-js vjs-default-skin" controls width="960" height="544" autoplay="true" preload="auto" data-setup="{}">
    <source src="#" type='video/mp4'>
    <source href="#" type='video/webm'>
    </video>
    and this is the code for a couple of the links.....

    Code:
    <a href="#" onclick="document.getElementsByTagName('video') .src = 'assets/videos/misc/antibioclic.mp4'">Antibioclic</a>
    <a href="#" onclick="document.getElementsByTagName('video') .src = 'assets/videos/misc/google.mp4'">Google</a>
    Any help is appreciated....

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You can use the VideoJS API to change the src of the video.

    See: http://videojs.com/docs/api/
    Code javascript:
     _V_("example_video_1").ready(function(){
     
       var myPlayer = this;
     
       // EXAMPLE: Start playing the video.
       myPlayer.play();
    });
     
    myPlayer.src("http://www.example.com/path/to/video.mp4");
     
     
    //or for multiple vid sources:
    myPlayer.src([
        { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
        { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
        { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
    ]);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AussieJohn,

    I've been trying to do the same type of SRC change using the onClick method. But, I haven't coded in javascript for a while, and I'm not sure how to incorporate the VideoJS code into my HTML page.

    I'm trying to create a CSS playlist for the VideoJS player that will match the Flash Playlist on my website: www.ustv.us. Here is the code I have so far:

    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>



    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>




    <style type="text/css" media="screen">



    /* playlist style */
    #playlist {
    width:312px;
    height:260px;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid #ccc;
    padding:4px 10px 12px 10px;
    background-color:#efefef;
    margin-top:20px;
    float:left;
    }

    /* playlist entry */
    #playlist a {
    display:block;
    width:280px;
    height:90px;
    padding:7px;
    background-color:#fff;
    border:1px solid #ccc;
    font:11px "bitstream vera sans", "lucida grande",verdana;
    text-decoration:none;
    margin-top:7px;
    color:#666;
    }

    /* different states of a playlist entry */
    #playlist a:hover {
    background-color:#ffc;
    }

    #playlist a.progress {
    background-color:#efefef;
    }

    #playlist a.playing {
    border:1px solid #666;
    background-color:#ffc;
    }

    #playlist a.paused {
    border:1px solid #666;
    background-color:#ffc;
    }


    /* elements inside playlist entry */
    #playlist a img {
    border:0px none;
    float:left;
    margin-right:10px
    }

    #playlist a strong {
    color:blue;
    padding-bottom:5px;
    }

    #playlist a em {
    border:0px none;
    float:left;
    margin-right:10px;
    background:url('/media/img/demos/clock.gif') no-repeat 0 50%;
    padding-left:20px;
    color:#333;
    font-style:normal;
    margin-top:10px
    }


    #playlist{
    margin-top: 0;
    }
    </style>


    </head>

    <body>

    <video id="HTML5_video_player" class="video-js vjs-default-skin" controls
    preload="auto" width="720" height="480" poster="http://www.ustv.us/HTML5_working/BillyB-Thats_Runoff_Man.jpg"
    data-setup="{}">
    <source src="http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.mp4" type='video/mp4'>
    <source src="http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.webm" type='video/webm'>
    </video>


    <script type="text/javascript">

    // <![CDATA[
    var myPlayer="HTML5_video_player"
    // ]]>
    </script>

    <!-- the playlist. simple HTML controlled with CSS -->
    <div id="playlist">



    <a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Thats_Runoff_Man.mp4')">
    <img src="http://www.ustv.us/dailies/daily_images/BillyB-RunoffMan1.png" width="120" height="67" />
    <strong>Baltimore Woods - Billy B Performance - That's Runoff Man</strong><br />
    <em>0.22</em>
    </a>

    <a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-With_My_Hand.mp4')">
    <img src="http://www.ustv.us/dailies/daily_images/BillyB-WithMyHand.png" width="120" height="79" />
    <strong>Baltimore Woods - Billy B Performance - With My Hand</strong><br />
    <em>0.22</em>
    </a>

    <a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Water_Cycle.mp4')">
    <img src="http://www.ustv.us/dailies/daily_images/BillyB-WaterCycle1.png" width="120" height="79" />
    <strong>Baltimore Woods - Billy B Performance - Water Cycle</strong><br />
    <em>0.22</em>
    </a>

    <a href="#" onClick="myPlayer.src=('http://www.ustv.us/BaltWoods/BillyB-Flies_in_Black.mp4')">
    <img src="http://www.ustv.us/dailies/daily_images/BillyB-FliesInBlack.png" width="120" height="90" />
    <strong>Baltimore Woods - Billy B Performance - Flies In Black</strong><br />
    <em>0.22</em>
    </a>

    </div>
    <!-- let the rest of the page float normally -->

    </body>

    </html>

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The way your calling the video player will cause an error as myPlayer is equal to a string not the player object, see the below.

    Code JavaScript:
    var myPlayer = _V_('HTML5_video_player');


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •