I am trying to have a page with embedded video that dynamically will change the source when a link below the video frame is clicked. The source videos are on my host server.
i.e. this pic illustrates it:
I came across this page, which seems to have the answer, but I tried it and it didn't work. Following the example, I pasted the css & javascript in the and the necessary html in the body. I updated all the references to my urls and tried to keep file names the same as the example for testing.
Below is what I tried.
Can someone point out my errors, or provide a more elegant way of doing this? Basically dynamically change embedded video when link is clicked and the video work in all the typical browsers, and most devices.
This is for a wordpress site, using JW Player for wordpress, (my error) instead I found this script/code is actually for Video.js
It loads the pre image but doesn't play.
As a test I tried this and it does 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 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 1st video loads but no video, error is
"No video with supported format and MIME type found"
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>
Result the 1st video loads but not the other linked videos.
names of the 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 this both in wordpress page and html page the results are the same.
I'm not sure even if this script will do what I want?
Have you tried doing it via JW Player's JavaScript API? From what I gather you can load a playlist and invoke a function that will play a video at a certain index:
playlistItem(index)
Start playback of the playlist item at the specified index.
Related
I have youtube videos for my website and I want to show these videos in video tag of HTML5.
Is it possible to have iframe tag of youtube be embedded in video tag?
<div class="col-md-6">
<video class="video_link" width="320" height="240" controls="controls" id="3">
<source src="" type="video/mp4" />
</video>
</div>
If a browser doesn't recognize the HTML5 video tag, then one can upload a Flash swf file and point to it in the src attribute in the embed tag, which is embedded in the video tag itself.
<video width="{#}" height="{#}" controls>
<source src="{ogg_file}.ogg" type="video/ogg" />
<source src="{mp4_file}.mp4" type="video/mp4" />
<!-- The fallback in case the browser doesn't recognize the HTML5 video tag -->
<embed src="{flash_swf_file}.swf" type="application/x-shockwave-flash" width="{#}" height="{#}"></embed>
</video>
The iframe tag loads a page within an existing page. Maybe they wanted to have the video on a separate page specified by the iframe tag. Anytime you use an iframe, consider using this code in your CSS file because otherwise some browsers will show the box lines where the iframe is.
iframe[seamless] {
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
For the CSS code to work, seamless has to be included at the end of the opening iframe tag.
<div><iframe src="{page_name}.html" height="{#}" width="{#}" seamless></iframe></div>
Go to that video and click on share button you will embedded link for video.
just copy and paste where you want.
<iframe width="560" height="315" src="https://www.youtube.com/embed/QBpz2fu10eY" frameborder="0" allowfullscreen></iframe>
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]
Here how i am changing video
<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
var video_player = document.getElementById("videotag");
video_player.src = "media/draw1.mp4";
}
</script>
</html>
You can use preload auto for preventing the loading delay
<video width="1000" id="videotag" autoplay preload="auto" controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
while my question may be similar to the one found at: hide video container when there's no video in database to be displayed HTML PHP, I am looking for a Javascript/jQuery solution.
Essentially the effect I need to achieve is that when the html5 <video> tag can't load the video from its src, I want the div the video tag is contained in to be hidden, preferably with a jQuery solution to this unless there's a very simple way to do this which I have over looked.
What i have so far looks similar to this:
<div id="video">
<video controls="controls" width="320" height="240">
<source src="published/video.mp4" type="video/mp4" />
</video>
</div>
Any input is greatly appreciated.
Here is a pure js solution:
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
$(document._video).hide()
});
Also you can look at the link below for other video events:
http://www.w3.org/2010/05/video/mediaevents.html
You can detect <video> support with http://modernizr.com/
if (!Modernizr.video) $('#video').hide();
http://modernizr.com/docs/#video
For check if file exists on server - How do I check if file exists in jQuery or JavaScript?
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bb.mp4" type="video/mp4">
<source src="mov_bb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
v.parentNode.style.display = 'none';
}, false);
</script>
</body>
</html>
Copied from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded
I'm using the Video.js player to stream live content from my local webcam (but I guess that should not matter in that case, it could be any live stream from web). I wrote a really simple code:
<head>
<link href="video-js.css" rel="stylesheet">
<script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" data-setup='{}' autoplay="true" >
<source src="http://10.172.180.31:8090/live.flv" type="video/x-flv">
</video>
</body>
And now in that configuration I see the stream content, but there are couple errors:
1) I don't see the controls (to pause the stream)
2) Stream looks like this, so the video is not resized to the full size of the component. BUT (and that's really interesting) when I resize the elements on the webpage (e.g. in Chrome by holding control and scrolling the mouse wheel) to 110%, then the video fills the whole component. Seems like a bug in video.js or maybe my implementation is wrong?
3) when I remove the parameter autoplay="true" - nothing shows up, controls and video is gone and it's impossible to play it.
4) I wanted to remove the autoplay="true", but adding the poster info by including poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - nothing has changed, the stream is not visible, the controls are not there.
5) when I remove the data-setup parameter and leave it like this:
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > then the controls and poster are visible (which is great!), but the play button is greyed out and it's impossible to play my stream.
I want to achieve the effect that after loading the webpage I can see the poster image with play button, and when I click it - I will see the properly resized stream. What am I missing?
Thanks!
Try it without the controls
This works for me:
<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}">
<source src="http://server/playlist.m3u8" type="application/x-mpegurl">
</video>
First of all, try to use the lastest release of video.js, you are using 3.2 version...
<link href="http://vjs.zencdn.net/4.12.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12.6/video.js"></script>
Secondly, if you are trying to use a live (stream) with videojs, you should see how videojs reads the stream sources: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md#enabling-streaming-playback
Note that streaming urls need to have a specific pattern:
{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format}
FLV is a video container, not a protocol, you should use a stream protocol such a RTMP(Flash), HDS(Flash), Mpeg/Dash or HLS(Apple).
Regards,
I am new to video.js and trying to figure this out. I am trying to load videos onto my site self hosting. below is the code I am using. I do not know what I am doing wrong, maybe the source src= is off. I do not know. I get a "No video with supported format or MIME type found (which I know Firefox has problems with mp4).
<div style="overflow:hidden; margin: 0; padding: 0;">
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<video id=my_video_1" class="video-js vjs-default-skin" controls
preload="none" width="266" height="150" poster="images/BrattyGirls/BrattyPreview.jpg"
data-setup="{}">
<source src="../images/BrattyGirls/Previews/" type="video/mp4">
</video>
</div>
Above is in a VideoPreviews.php that is loaded to my ftp server. Below is the code I am trying to put on my page to host the video. The video plays when going directly to the link. Also is that correct in the above code for the source src= to be able to use the same code with different videos starting off with that directory but ending in a different title, i.e. /images/BrattyGirls/Previews/vid1 /images/BrattyGirls/Previews/vid2 etc.
<object data="http://www.primalproductionsllc.com/VideoPreviews.php?previd=http://www.primalproductionsllc.com/images/BrattyGirls/Previews/allprohd2.mp4" type="text/html" width="300" height="240" style="overflow: hidden; height: 256px; width: 314px;">
</object>
You need to specify a video file, not a directory containing your videos.
<source src="http://www.primalproductionsllc.com/images/BrattyGirls/Previews/allprohd2.mp4" type="video/mp4">