WordPress.org

Ready to get started?Download WordPress

Forums

JW Player for Flash & HTML5 Video
dynamically change embed video source with links? (3 posts)

  1. dwcarkba
    Member
    Posted 1 year ago #

    Hi,
    Does JW Player have a way to dynamically change embedded video source by simply clicking on a link (with new source)?

    I know there is a way to easily do this with HTML 5 & java script, but I'm a total noob with little knowledge/understanding, without an ABC explanation + examples instead of terms with no example I just don't get it.

    I have a theme "responsive" that has an input box for the home page in the backend. I can easily put a video or image or html there. I want to great a video frame with a default video, then when someone clicks on the links (or thumb image) below that video frame the source changes to the new video.

    http://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/

  2. dwcarkba
    Member
    Posted 1 year ago #

    I came across this code that uses javascript/css/html which is suppose to dynamically change source for embedded videos but it doesn't work. I have tried it both in a wp-page and html page.

    <html>
    	<head>
    		<title></title>
    		<style media="screen" type="text/css">
    .wrap            { margin:30px auto 10px; text-align:center }
    .container       { width:440px; height:300px; border:5px solid #ccc }
    p                { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
    		</style>
    <script>
    $("input[type=button]").click(function() {
        var $target         = "testvid_"+$(this).attr("rel");
        var $content_path   = "http://www.mywebsite.net/videos/";
        var $vid_obj        = _V_("div_video");
    
        // hide the current loaded poster
        $("img.vjs-poster").hide();
    
        $vid_obj.ready(function() {
          // hide the video UI
          $("#div_video_html5_api").hide();
          // and stop it from playing
          $vid_obj.pause();
          // assign the targeted videos to the source nodes
          $("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
          $("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
          $("video:nth-child(1)").attr("src",$content_path+$target+".webm");
          // replace the poster source
          $("img.vjs-poster").attr("src",$content_path+$target+".png").show();
          // reset the UI states
          $(".vjs-big-play-button").show();
          $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
          // load the new sources
          $vid_obj.load();
          $("#div_video_html5_api").show();
        });
    });
    
    $("input[rel='01']").click();
    </script>	</head>
    
    <body>
    		<section class="container wrap">
      <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
    
    setup="{}">
        <source src=""  type="video/mp4">
        <source src=""  type="video/ogg">
        <source src=""  type="video/webm">
      </video>
    </section>
    
    <div class="wrap">
      <input rel="01" type="button" value="load video 1">
      <input rel="02" type="button" value="load video 2">
      <input rel="03" type="button" value="load video 3">
    </div>
    
    	</body>
    </html>

    I used file names:
    testvid_01.mp4, testvid_01.ogv, testvid_01.webm
    testvid_02.mp4, testvid_02.ogv, testvid_02.webm
    testvid_03.mp4, testvid_03.ogv, testvid_03.webm
    testvid_01.png, testvid_02.png, testvid_03.png

    it loads the player and the 01.png image, but clicking on the link does nothing.

  3. JW Player
    Member
    Plugin Author

    Posted 1 year ago #

    Where did you try this?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic