I have an overlay over iframe and I want to make it so that when a user clicks on that iframe overlay video starts playing. Since that page is where I list all the articles I have more iframes, so I should pick the one from that element and then play it. How can I do that in Angular, what should I do in my controller when the click event happens?
This is my html:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
<div class="article-image-link">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
Update
I have tried a suggestion where I don't need to use the Youtube API, but the video was not being played. This is my code:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-if="!hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&controls=0&showinfo=0' | safeUrl }}"></iframe>
<iframe ng-if="hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&autoplay=1' | safeUrl }} "></iframe>
<div class="article-image-link">
<h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo($index)"></div>
</div>
My controller:
$scope.playVideo = function(index) {
$scope.videoPlaying[index] = true;
$scope.hasOverlayBeenClicked = true;
};
Based on article below mention, if we want to control youtube action like play and stop we need to use youtube api then we can control it by using JS.
https://developers.google.com/youtube/iframe_api_reference
or you can use some ready made lib like.
https://github.com/brandly/angular-youtube-embed
Or you create custom directive which internally uses youtube api.
http://blog.oxrud.com/posts/creating-youtube-directive/
The simplest solution, which doesn't involve using the YouTube API would be to autoplay the video and remove the <iframe /> from the DOM tree until the user clicks the overlay.
E.g.:
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-if='hasOverlayBeenClicked' ng-src="{{article.external_media[0].url + '?autoplay=1' | safeUrl }} "></iframe>
<div class="article-image-link">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
and somewhere in your controller:
$scope.playVideo = function() {
// ...
$scope.hasOverlayBeenClicked = true;
}
YouTube Iframe embed auto play # StackOverflow
you could do something like this :
on init
$scope.videoSrc = article.external_media[0].url;
and on click
element.bind("click", function(){
$scope.videoSrc = article.external_media[0].url + "&autoplay=1";
});
and then on html
<iframe ng-src="{{videoSrc | safeUrl }} "></iframe>
Related
I have a javascript file that displays a variable number of videos embedded from youtube and displayed in a grid.
I need the users to be able to select one video and click submit where I will will store the src link of that video in a variable.
Below is the related javascript portion:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += `
<div class="col s3">
<iframe width="100%" id="videoFrame" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" >
</iframe></div>
`;
}
HTML:
<form id="form1">
<div class="input-field">
<input type="submit" id="but1" value="Save Selection">
</div>
</form>
How do I do that using an event handler or any other possible solution?
why not use const videoId as the id of each iframe? Because you can't use an id more then once. Then in an onclick handler of each iframe element you can fire a function that sets the value of <input type="submit" id="but1" value="Save Selection"> to this.id.
Like so:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += '<div class="col s3">
<iframe width="100%" id="${videoId}" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" onclick='submitVid(this.id);'>
</iframe></div>';
}
Then the submitVid(video) function will look something like this:
function submitVid(video) {
//the video variable will hold this.id or the videoId
//Here you can do whatever you want with video.
//Full video id:
var url = "https://www.youtube.com/embed/" + video + "?rel=0";
//pass value to a textfield to submit
document.getElementById("textfield").value = video;
}
A better is to just store the videoId and not the full url. It saves space and it is faster.
Hope this helps! If not, please comment
try some_var = document.getElementById("videoFrame").src
I have a youtube video that I want shown but it doesn't show at all. I didn't add a height or width to video because I want to keep it responsive.
http://www.owlcarousel.owlgraphic.com/demos/video.html
<div id="carousel" class="owl-carousel">
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
<div><img src="http://cdn.playbuzz.com/cdn/7a7a5814-ed79-410c-b748-db6a24f73f0b/4d71c010-f930-4334-ba62-79d87a7ddef4.jpg"></div>
</div>
http://jsfiddle.net/nLz17fcv/12/
Adding a video using a tag Seems not working.
<div>
<a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>
Instead it you can replace it by Iframe to embed the video you want like this.
<div class="item-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/Oy9GFAQ4x4w">
</iframe>
</div>
In addition to, I've removed transitionStyle: "fade" because this property blocks the carrousel transition.
You can check it on this DEMO
Hope It Helps
In my case the error were with the URL that was being generated while creating iframe, I placed "https://" in front of Youtube iframe and changed few things as (Added "https:")
<pre>
if (video.type === 'youtube') {
html.attr( 'src', 'https://www.youtube.com/embed/' + video.id );
}
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo.com/video/' + video.id );
}
</pre>
One more thing I did for vimeo video was added "https:"
<pre>
url: 'https://vimeo.com/api/v2/video/' + video.id + '.json',
</pre>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I am trying to make a video playlist and I am new to JS, so I have run into a lot of problems.
I am trying to run this code:
//Simple JS Playlist by Kristi Witts - https://github.com/kwitts/js-playlist/
//MIT License
//Ensure all links in the div "#player" act in the same way:
var video_playlist = document.getElementById("myVideo"); //Element ID should be the same as the ID used in the container div in the HTML.
var links = video_playlist.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = handler;
};
//Give functionality to the links:
function handler(e) {
e.preventDefault(); //Prevents default action of links going directly to the source file
videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
video = document.querySelector("#myVideo video"); //Finds div #player and video
video.removeAttribute("poster"); //Removes the poster attribute in the video tag
source = document.querySelectorAll("#myVideo video source"); //Finds source elements inside the video tag
source[0].src = filename + ".mp4"; //defines the MP4 source
video.load(); //Loads video when video is selected
video.play(); //Plays video automatically
return false;
};
<div class="six columns">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350">
<source src="videos/1.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Screamer 2015 Intro</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span><i>/</i>
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"><i></i></span>
</div>
<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</div>
<div class="five columns" id="playlist-parent">
<div id="playlist">
<img src="#" class="thumbnails" id="2">Screamer | Intro | Version (Step Style)
<img src="#" class="thumbnails" id="3">Screamer | Speedart | Joined Naive!
<img src="#" class="thumbnails" id="4">Screamer | Speedart | AE7 Banner
<img src="#" class="thumbnails" id="5">Screamer | Speedart | Luck 7 Snipers Banner
<img src="#" class="thumbnails" id="6">Screamer | Speedart | ESmthz Banner (Client Work)
<img src="#" class="thumbnails" id="7">Screamer | Speedart | Solar #SolarDRC
<img src="#" class="thumbnails" id="8">Screamer | Speedart | Dare Creations
<img src="#" class="thumbnails" id="9">Screamer | Speedart | Line Banner | New Style?
<img src="#" class="thumbnails" id="10">Screamer | Speedart | Version 2-in-1
</div>
</div>
But I am getting TypeError: video_playlist is null
I would like to know why this is happening and what I can do to fix it, and prevent it in the future after I know how it happened.
For some reason (I think it may be this video_player is null) my playlist does not replace the video in the video player, but it opens and plays the video like it would normally do if you selected the file>open with>firefox.
Your javascript doesn't reference the dom. The issues are that you have a video element with a source element beneath it, but you're using
video = document.querySelector("#myVideo video")
You later call video.load(), but this is on the source element, not the video element. I have reloaded video to call load on it
video = document.getElementById("myVideo")
Here it is, fixed:
//Simple JS Playlist by Kristi Witts - https://github.com/kwitts/js-playlist/
//MIT License
//Ensure all links in the div "#player" act in the same way:
var video_playlist = document.getElementById("playlist"); //Element ID should be the same as the ID used in the container div in the HTML.
var links = video_playlist.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = handler;
};
//Give functionality to the links:
function handler(e) {
e.preventDefault(); //Prevents default action of links going directly to the source file
videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
video = document.querySelector("#myVideo source"); //Finds div #player and video
video.removeAttribute("poster"); //Removes the poster attribute in the video tag
source = document.querySelectorAll("#myVideo source"); //Finds source elements inside the video tag
source[0].src = filename + ".mp4"; //defines the MP4 source
video = document.getElementById("myVideo")
video.load(); //Loads video when video is selected
video.play(); //Plays video automatically
return false;
};
Here's a working fiddle: https://jsfiddle.net/d2tgyfzb/
I have 2 videos in one page and each video have seek buttons but when I click on seek buttons on the first video the second video also effective. but when I click on the seek buttons in the second video it's working fine, so I want each self-contained independent video
flowplayer(function(api, root) {
$(".rewind").click(function (rebtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(rebtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? -3 : -3;
api.seek(api.video.time + target);
}
});
$(".forward").click(function (fwtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(fwtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? 3 : 3;
api.seek(api.video.time + target);
}
});
});
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo1">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>
Your flowerplayer function is running twice, once for each video; therefore, you are binding the click handler to all buttons with class .rewind/.forward twice.
You could make your binding more specific like this:
$(root).on("click", ".rewind", function (rebtn) {...
In this way, each time the function is run, it will only add a handler to the rewind/forward buttons that apply to this player.
You could also probably simplify to one handler:
flowplayer(function (api, root) {
$(root).on("click", ".rewind, .forward",function (rebtn) {
if (api.playing) {
var target = $(this).hasClass("forward") ? 3 : -3;
api.seek(api.video.time + target);
}
});
});
Working DEMO
I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds