All geek questions in one place

Video.js - update the video source by clicking on the link

I am trying to create a page with an embedded video that will dynamically change the source when the link below the video frame is clicked. The source videos are on my host server. those. This figure illustrates this:

! [sample page] [1]

I came across this page , which seems to have an answer, but I tried, and it didn't work. Following an example, I inserted css and javascript into the desired html in the body. I updated all the links to my URLs and tried to keep the file names the same as the test example. Below I have tried.

Can someone point out my mistakes or provide a more elegant way to do this? Basically, embedded videos dynamically change when a link is clicked, and the video works in all typical browsers and most devices. This is for the wordpress site , using the JW Player for wordpress , (my mistake), instead I found this script / code actually for Video.js

It downloads a preview image but does not play.

As a test, I tried this and it plays one video correctly:

<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>

Javascript version for 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 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>

The preload image for the first video is being loaded, but there is no video, the error "There is no video with a supported format and MIME type"

So, I added the source for the first video in this 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>

The result of loading the 1st video, but not other related videos.

video names / 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.pvidvid_bv.bv.bv.bv_vm_vidb03.vv

I tried this on both the wordpress page and the html page, the results are the same.

I'm not sure even if this script will do what I want?

+6
source share
3 answers

This overwrites the src attribute of the video element three times, so it will always be set to web video.

 $("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");

Instead, use the video.js API to load an array of sources, so video.js can choose the one that the current playback technology can play:

 $vid_obj.src([ { type: "video/mp4", src: $content_path+$target+".mp4" }, { type: "video/webm", src: $content_path+$target+".webm" }, { type: "video/ogg", src: $content_path+$target+".ogv" } ]);

Updated script: http://jsfiddle.net/mister_ben/8awNt/

+16
source

There is no video.js library in the javascript example. You can try to include the following in your head.

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

Otherwise, is there a way to view the page somewhere somewhere?

+3
source

Adding a general answer to the original question, the video switch answered by misterben above still works in the current version (4.8.0) video.js , but the code that changes the poster image does not work from the original message of the question or into the jsfiddle sample code from 9/5/2014 year.

You need to make two small modifications to the source code of user239759 (see below):

 // hide the current loaded poster $("img.vjs-poster").hide(); ... ... ... // replace the poster source $("img.vjs-poster").attr("src",$content_path+$target+".png").show();

:

 // hide the current loaded poster $(".vjs-poster").hide(); ... ... ... // replace the poster source $(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();

This is if you use the standard video.js code and the associated css.

It should also be noted those who did not understand this from the above code, poster images should be called the same as the video, except for the file extension, and placed in the same directory as the video. Unless you use another var for $content_path for poster images.

0
source

Source: https://habr.com/ru/post/945453/

More articles:


All Articles