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.
Related
I am coding an HTML Website and I embedded the video successfully.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
This worked very well. I want to know, however, how can I link a website on this embedded video. If I click the video, I want to redirect to another webpage. I tried the below code, but it didn't work. Thanks in advance.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<a href="http://www.naver.com" target="_blank">
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
You need to enclose the video element in the a like so:
<section class="section1" id="videopage">
<a href="http://www.naver.com" target="_blank" >
<video width="100%" playsinline autoplay muted loop >
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</a>
</section>
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>
2I need some help, I'm using several videojs html players on slick slider sycing carousel. My problem is when I click on other carousel thumbnail to go to the other video the first video keeps playing. I'd like to pause any video on click any thumbnail.
My html is:
<div class="slider-for">
<div class="video-wrap">
<video id="example_video_1" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video2.png"
data-setup='{}'>
<source src="images/video/Kalima2.mp4" type='video/mp4' />
<source src="images/video/Kalima2.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_2" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video1.jpg"
data-setup='{}'>
<source src="images/video/Kalima1.mp4" type='video/mp4' />
<source src="images/video/Kalima1.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_3" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students.jpg"
data-setup='{}'>
<source src="images/video/Students.mp4" type='video/mp4' />
<source src="images/video/Students.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_4" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video3.jpg"
data-setup='{}'>
<source src="images/video/Kalima3.mp4" type='video/mp4' />
<source src="images/video/Kalima3.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_5" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students2.jpg"
data-setup='{}'>
<source src="images/video/Students2.mp4" type='video/mp4' />
<source src="images/video/Students2.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
</div>
<div class="video-thumb">
<div><div id="thumb"><img src="images/video/video2.png"></div></div>
<div><div id="thumb"><img src="images/video/video1.png"></div></div>
<div><div id="thumb"><img src="images/video/video3.png"></div></div>
<div><div id="thumb"><img src="images/video/video4.png"></div></div>
<div><div id="thumb"><img src="images/video/video5.png"></div></div>
</div>
I find this js:
_V_("example_video_1").ready(function(){
var player = this;
var pausebutton = document.getElementById("thumb");
pausebutton.onclick = function(event) {
player.pause();
};
});
With this function I can pause only the first video, I'd like some help for a function when I click on single thumbnail I could pause any playing video and it should to work for all thumbnails too. Someone could help me?
The main issue you are having is that you have several video tags with the same ID: "example_video_1".
I suggest giving each video tag their own ID. Then you'll be able to access them individually.
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">
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.