javascript - update video source when clicking on a link -
i trying have page embedded video dynamically change source when link below video frame clicked. source videos on host server. i.e. pic illustrates it:
sample of page http://imageshack.us/a/img829/7679/testvidresult.png
i came across this page, seems have answer, tried , didn't work. following example, pasted css & javascript in , necessary html in body. updated references urls , tried keep file names same example testing. below tried.
can point out errors, or provide more elegant way of doing this? dynamically change embedded video when link clicked , video work in typical browsers, , devices. wordpress site, using jw player wordpress, (my error) instead found script/code video.js
it loads pre image doesn't play.
as test tried , play single video properly:
<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300" controls="controls"> <source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/> <source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/> <source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/> </video> the javascript version multiple source links
<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 current loaded poster $("img.vjs-poster").hide(); $vid_obj.ready(function() { // hide video ui $("#div_video_html5_api").hide(); // , stop playing $vid_obj.pause(); // assign targeted videos 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 poster source $("img.vjs-poster").attr("src",$content_path+$target+".png").show(); // reset ui states $(".vjs-big-play-button").show(); $("#div_video").removeclass("vjs-playing").addclass("vjs-paused"); // load 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> the preload image 1st video loads no video, error "no video supported format , mime type found"
so added source first video in section
setup="{}"> <source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4" type="video/mp4"> <source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv" type="video/ogg"> <source src="http://www.mywebsite.net/videos/videos/testvid_01.webm type="video/webm"> </video> result 1st video loads not other linked videos.
names of videos/png: testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_01.png testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_02.png testvid_03.mp4, testvid_03.ogv, testvid_03.webm, testvid_03.png
i have tried both in wordpress page , html page results same.
i'm not sure if script want?
have tried doing via jw player's javascript api? gather you can load playlist , invoke function play video @ index:
playlistitem(index)
start playback of playlist item @ specified index.
Comments
Post a Comment