I have the following javascript executes when the video tag has loaded via ajax, as suggested at the bottom of the following link https://github.com/videojs/video.js/blob/master/docs/setup.md
<video id="video-1" style="max-width:90%; height:auto">
<source src="/link/to/video.mp4" type="video/mp4">
</video>
_V_("video-1", {controls:true}, function(){});
and this javascript basically breaks the controls and render it as text as below:
Play
Fullscreen
0:00
0:05
-0:05
Loaded: 0%
Progress: 0%
00:00
Mute
if I take out the options for controls as below and it works
_V_("video-1", {}, function(){});
I have the javascript library and css in the head element
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Looks like I need to add the class into the video tag
<video id="video-1" class="vjs-default-skin">
Related
I am testing a script that would essentially let me pull the video source URL through ajax and change the video source to try to hide the source of my video files from users (basically dont want people downloading my content).
I have no issues getting the ajax to work, but the "replaceChild" command doesnt seem to be doing anything for me. I stripped out all the ajax and tried to run a basic function calling this command with "alerts" along the way to show me what is working and what is not, it appears to me that the replaceChild command is not working.
Can anyone spot any issues with my code or offer alternate solutions?
<!DOCTYPE html>
<html>
<head>
<title>Test Script</title>
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript">
function testFunction(){
var video = document.getElementById("video2").getElementsByTagName("source")[0];
var source = "realvideo.mp4";
clone = video.cloneNode(true);
alert(clone.src);
clone.setAttribute("src",source);
alert(clone.src);
video.parentNode.replaceChild(clone,video);
alert(video.src);
}
</script>
</head>
<body onLoad="testFunction()">
<div align="center">
<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="realvideo.mp4" type="video/mp4">
</video>
</div>
<div>
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="sorry.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
That code alerts "sorry.mp4", "realvideo.mp4", "sorry.mp4"
This is expected behaviour. When you call:
video.parentNode.replaceChild(clone,video);
video will not suddenly become a different element. It will still have the same src attribute as before. video is detached from the document by the above replaceChild call, and clone is injected in its stead... it's an in/out swap. So you should not expect that video still references the element in the document and becomes the same reference as clone.
To really verify the change you could end your function with this code:
video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);
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 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.
I'm using the video.js plugin and have a video intro that plays when my site loads. It works by autoplaying as soon as the page loads and it is in a div container that is z-indexed and overlayed over my home page.
I have jquery set to delay() and then fadeOut() the div out revealing my home page.
Good in theory only everyone has different connection speeds and the fadeOut() often happens too early or too late.
Is there a way to fadeOut() my div when the video has stopped?
Here is my jQuery:
$(document).ready(function() {
$("#overlay-video").delay(10000).fadeOut('slow');
});
EDIT: I have also just tried the following but this also does not work:
$(document).ready(function(){
$("#movie-id").bind('ended', function(){
alert("planet earth");
});
});
Thanks for the replies my HTML looks like this:
<div id="overlay-video">
<!-- Begin Video.js -->
<video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<!-- End Video.js -->
</div>
My jQuery is working because I can fadeOut the video element fine.
Couple things:
only a single doc.ready fxn is needed for all your scripts on your home page
use the on() method (with jQuery 1.7+)
Most importantly, fadeOut() needs to be inside the on('ended') function
As a general HTML5 <video> solution, this should work: http://jsfiddle.net/trpeters1/XzCMb/1/
$(document).ready(function(){
$("#movie-id").on('ended', function() {
console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
});
});
However, Video-js appears to require a call to the video.js object, so do this instead: http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video
_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
this.addEvent("ended", function(){ //adding "ended" event to video-js object
{ console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
}
});
});
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me