I'm trying to get the vimeo universal player to play a new video in its iframe.
I don't want to initialise a complete new iframe each time I switch to a new video.
Is there a best practise to do this?
If your embed code is this:
<iframe id="vimeo_vid" src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
then you could reload the frame using jQuery:
<script type="text/javascript" src="jquery.js"></script>
<script>
function loadit() {
var loc = "http://player.vimeo.com/video/NEW_VID_ID";
var iframe = $('#vimeo_vid');
$(iframe).attr('src', loc);
}
</script>
Call that function to change the content, like this:
<button type="button" onclick="loadit()">Change Content</button>
Related
I have a problem with my javascript code, maybe you can find what I'm doing wrong. My Play() event does not do what I want.
I want to "re-make" a page of the ferrari site with an onmouseover event. This code is written with a HTML widget inside of elementor, maybe is that the reason why something isn't working.
Hope to hear from you!
My code;
<div class="wrapper1" >
<video id="Hvideo" width="320" height="240" preload="auto">
<source src="https://www.youtube.com/watch?v=HJVHZR3KkjM" type="video/mp4">
</video>
<button id="Htext" onmouseover="Play()" onmouseout="Pause()">HVAC</button>
</div>
<script type="text/javascript">
var Htext=document.getElemenetById("Htext");
var Hvideo=document.getElemenetById("Hvideo");
function Pause(){
Hvideo.pause();
}
function Play(){
if(Hvideo.paused)
Hvideo.play();
}
</script>
image
www.ferrari.com
I am trying to play the recorded video from Red5 pro video using the html 5 controls.
I managed to do the live streaming with .m3u8 extension and i can't play the videos already recorded [Video On Demand (VOD)].
I use the video js player for playing live stream ,but the same code is not working for recorded videos.
<video id=red5pro-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
Libraries
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="videojs/video.min.js"></script>
<script src="videojs/videojs-media-sources.min.js"></script>
<script src="videojs/videojs.hls.min.js"></script>
<!-- Red5 Pro SDK -->
<script src="red5pro/red5pro-sdk.min.js"></script>
<script src="script/hls-metadata.js"></script>
****JS Code : ****
How can i play it or could you provide me some samples if you have?
<script>
(function () {
var player = videojs('red5pro-video');
player.src({
src: "http://54.255.142.187:5080/live/kris.m3u8",
type: "application/x-mpegURL",
useCueTags: true
});
window.onOrientation(player, 'red5pro-video');
player.play();
})();
</script>
How to use magnific-popup to retrieve and popup an html5 video from my server instead of getting the video from youtube, vimo, ...?
<video width="500" height="350" controls>
<source src="/static/video/bunny.mp4" type="video/mp4" />
Your browser does not support this video format.
</video>
Thanks.
I have got this to work using the following as a link to open the video:
<a class="popup-player" href="/static/video/bunny.mp4">
video link
</a>
and then used the Iframe type to display it:
$('.popup-player').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',
srcAction: 'iframe_src',
}
});
This is a very basic version, it opens the video in an iframe but I have yet to work out how to change the things like the height and width. I'm still learning this stuff so I dont know how it works I just know it puts a video up on the screen. If you get it working and build a more complex version please let me know so I can improve my version.
This worked great for me. Uses "Inline" type with auto-starting HTML5 video.
Javascript:
$('.openVideo').magnificPopup({
type: 'inline',
callbacks: {
open: function() {
$('html').css('margin-right', 0);
// Play video on open:
$(this.content).find('video')[0].play();
},
close: function() {
// Reset video on close:
$(this.content).find('video')[0].load();
}
}
});
HTML:
<a href="#video-01" class="openVideo">
<div id="video-01" class="video-popup mfp-hide">
<video preload="false" poster="/videos/01.png">
<source src="/videos/01.mp4" type="video/mp4">
</video>
</div>
Original source: https://github.com/dimsemenov/Magnific-Popup/issues/626
I think that you should check basics first:
-if the path to plugin is correct and included correctly
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />
<!-- Magnific Popup core JS file --><br />
<script src="magnific-popup/jquery.magnific-popup.js"></script>
It’s not required, but we recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag).
If you already have jquery.js on your site, don’t include it a second time, or use jQuery.noConflict(); mode. Optionally, you can include Zepto.js instead of jQuery, or choose which one to include based on browser support. ACCORDING->http://dimsemenov.com/plugins/magnific-popup/documentation.html
-if you have the movie on your server and if the path to it is correct.
/ is for getting into folder
Then JS:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
For more information see the link I putted few lines above
I have a webpage which opens .flv video files in light box (top_up-min.js/modal). Now i am trying to open the .mp4 version of same video files using JW player 6 in a light box.
The code i tried is working to open a video in lightbox [jquery.jwbox.js ] and suggested code opens a hidden div as a lightbox .But i have below issues
1.After clicking the video ,click anywhere else other than “close button” the video still closes.
In IE 8 or above , even after closing the video ,you can hear the audio. It only stops when you refresh the page .
Does anyone already using this have any fix for this?
2.Is there any other jquery light that can be used for JW player (mp4 format)
Thanks
<head id="Head1" runat="server">
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript" src="/js/jquery.jwbox.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jwbox.css" />
<script type="text/javascript">jwplayer.key = "key";</script>
<title></title>
<script type="text/javascript">
//this function i tried to close the video because the existing jquery one
closes video even when u touch outside the box.but its throwing js error.
function fnClose() {
document.getElementById('jwbox_hidden').style.display = 'none';
document.getElementById('jwbox_background').style.display = 'none';
jwplayer().stop(true);
return false;
}
function loadVideo(myFile,title) {
document.getElementById("videoTitle").innerHTML = title;
jwplayer("player").setup({
file: myFile,
width: '640',
height: '480',
volume: 100,
autostart: true,
primary: "flash"
});
}
</script>
</head>
<body>
<p>
Click the link to display a JW player with a video in the JW Box.
</p>
<div class="jwbox">
<ul> <li>Nursery Workers</li></ul>
<ul> <li>Computer Programmers</li></ul>
<ul> <li>Child Care Workers</li></ul>
<div class="jwbox_hidden" id="jwbox_hidden">
<div class="jwbox_content">
<label id="videoTitle" class="te_title"> </label>
<a class="te_close_link" style="display: block;" onclick="fnClose();" ></a>
<div id="player"></div>
</div>
</div>
</div>
<br />
</body>
I know this might not be the answer you're precisely looking for but it worked when I tested it. I haven't found the precise cause of the problem. This is a hacky workaround.
If you look in jwbox.js there's a try catch block like this:
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { }
I added your fnClose() into the catch block:
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { fnClose() }
Alternatively, this seems to perform faster:
try {
fnClose();
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) { }
That at least invokes fnClose() when if sendEvent("STOP") fails, which is, I believe, the root of the problem.
Hope that helps, sorry this is my first StackOverflow answer :)
-Pablo
</html>
<head>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'194541653919499', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
</body>
<html>
This is my HTML page. I am expecting a Login with Facebook button in my page. But it doesnot appear. What is the problem?
Hi are you embdding facebook connect code in your html tag? Other thing you have to load your jsdk either synchronously or asynchronously. Put the code of like button after that. First make your html tag like this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
and then try this just after your <body> tag
<body>
window.fbAsyncInit = function() {
FB.init({
appId:'194541653919499', cookie:true,
status:true, xfbml:true
});
};
(function() {
var e = document.createElement("script");
e.type = "text/javascript";
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
</script>
Use this code for your like button. Your third problem is that you are having two facebook connect statements in your code. When you have connected with facebook using a asynchronously then you dont need to connect again when you are putting like button code. use this code
<fb:like href="http://rgksugan.in/" show_faces="true" width="450" font=""></fb:like>
iframe end tag of your like button is not well formatted.
Change
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
to
<iframe src="http://www.facebook.com/plugins/like.php?href=http://rgksugan.in/"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>