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">
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 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'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 VideoJS to as my video player for a project I've been working on. Basically I have a div, and I wanted to have the video player within that div, however when I load the page nothing happens, and the video is never played. In fact, the video is never loaded nor shown in the page. I basically copied the example from VideoJS' page. Any thoughts?
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<div style="position: absolute; top: 50px; left: 600px; display:none">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'></source>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>></source>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'></source>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
MP4,
WebM,
Ogg<br>
<!-- Support VideoJS by keeping this link. -->
HTML5 Video Player by VideoJS
</p>
</div>
<div style="clear:both;"></div>
</div><!--main-->
You have set your div display:none. So even after the player is loadin, the div it resides in, was being hidden. Change your div from <div style="position: absolute; top: 50px; left: 600px; display:none"> to <div style="position: absolute; top: 50px;"> to display the player properly!
working demo: http://jsfiddle.net/epinapala/YsXTu/1/
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<div style="position: absolute; top: 50px;">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'></source>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>></source>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'></source>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
MP4,
WebM,
Ogg<br>
<!-- Support VideoJS by keeping this link. -->
HTML5 Video Player by VideoJS
</p>
</div>
<div style="clear:both;"></div>
</div><!--main-->
I have come across another problem. video.js removes any onload functions in the hosting page. So if you have an onload call in either or window.onload then it won't fire.