I have Microsoft stream video iframe embed on html page pop-up modal. The video is displayed on Modal pop-up when a button is clicked and plays with default controls. When i close the modal pop, the video still runs on the background. I need to stop/pause the video when the modal pop-up is closed. I have tried with JavaScript video pause scripts but nothing works out. Streams runs with Azure player, Any suggestion to control the video with JavaScript
Related
My website has a video banner at the top of the home page similar to AirBnb's. It has a play glyphicon on it. When I press the glyphicon, I want a video from YouTube to open in fullscreen mode and play automatically. Then, when the user quits the fullscreen video, I want the Iframe to vanish and all audio to stop.
Right now I have this for Slim markup
.fullScreenContainer
.video-container#autovid height="100%"
= video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
.container#playButton
.text-center
h1#videoHeading Press Play to Watch the Video
a href="javascript:void(0);" onclick="addIntroVideo()"
span.glyphicon.glyphicon-play
and this is my jQuery function
function addIntroVideo() {
$('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}
My understanding is that appending ?rel=0&autoplay=1 to the YouTube URL makes the video play in full screen mode and start automatically. However, when I press play it just loads a tiny iframe and autoplays that. How do I change this code to get it to do what I want?
Don't make the iframe yourself. Instead, use the YouTube iframe API example
You can add embedded JavaScript under this Slim tag:
javascript:
That JavaScript creates the iframe and an object called player that has methods stopVideo() and startVideo(), and you can use more JavaScript to hook those functions to a button click handler.
how can start a video after click a generic button.
I just initialized the flowplayer in my page.
I have developed a video playlist for a Drupal site. My question is: Is it possible to show the spinner instead of the big play button on every video ending(through Javascript), until the page containing the next video of each list is loaded? The videojs version that's used is 2.0.2.
I want to play a youtube video in fullscreen on click of a button. I currently have the following iframe:
<div class="youtube-trailer">
<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/whatever" allowfullscreen frameborder="0"></iframe>
</div>
On Safari Mobile, specifically, when a press the Play button the video launches in full screen which is the desired behavior. This is fine. I don't want the iframe displayed on the page though. I just want a button that will open the video in fullscreen using the native video player. i.e. i don't want to create an overly-elaborate lightbox to house the video.
Anyone have any ideas?
The standard youtube video link format is:
http://www.youtube.com/watch?v=Lv-sY_z8MNs
You can link directly to the full screen video (without opening a new window) by adding "_popup" after "watch" in the URL:
http://www.youtube.com/watch_popup?v=Lv-sY_z8MNs
This should work for both mobile and desktop browsers. Naturally, if you did end up wanting to open your link in a new page, simply add "target="_blank" to your opening anchor tag.
I am using VideoJS's WordPress plugin (http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/) to display self hosted videos on a website. Videos are listed in a gallery and each video opens in a modal window when clicked. This is working great, but when the modal window is closed, the video continues to play in the background.
Is there a way to stop or terminate all HTML5 videos on a page using jQuery? My thinking is that I will run this "stop" function (if it exists) when a modal window is closed.
Thanks.