i have two ng-repeats that i would like to connect together using their unique id. The idea is that you click a movie poster and the corresponding streaming video will come up the screen above using CSS hide/show. This is what i have so far:
<div class="contentContainer" ng-app="webtest">
<div class="" ng-controller="LandingPageController">
<div class="videoContainer" ng-repeat="movie in movies" >
<video width="800" controls>
<source src="{{movie.stream}}" type="video/mp4">
</video>
</div>
<div class="moviesContainer">
<div class="movieCell" ng-repeat="movie in movies">
<a href="#tab{{movie.id}}">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
</div>
If you use Angular, you don't have to/ should use jQuery.
Angular allows you to handle click event with ng-click.
To your <a> add ng-click="select_video(movie.id)" (you can also remove href).
And you controller should look like this:
var app = angular.module('{your-app-id}', []);
app.controller('LandingPageController', function ($scope) {
$scope.selected_id = null;
$scope.movies = (...) /* The array of movies. */
$scope.select_video = function(id) {
$scope.selected_id = id;
};
});
Then, to every .videoContainer > * add ng-if="selected_id == movie.id".
Should work, let me know if it doesn't.
EDIT:
Also reorganize your HTML like this:
<div ng-controller="...">
<div class="videoContainer" ng-repeat="...">
<div ng-if="...">
<!-- <video /> here, and stuff visible only if this video is selected -->
</div>
<!-- Your <a /> -->
</div>
</div>
You don't need 2 loops. Create a reference to selected item, and set it up in the loop like:
<a ng-click="selectedMovie = movie">...</a>
Let then angular do everything for you.
<div ng-controller="LandingPageController">
<video width="800" controls>
<source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
</video>
<div class="newscontainer">{{selectedMovie.id}} CLICKED</div>
<div class="moviesContainer" id="tabs">
<div class="movieCell" ng-repeat="movie in movies">
<a ng-click="selectedMovie = movie">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
EDIT:
Not tested, may not work. If so, try <a ng-click="$parent.selectedMovie = movie">...</a>
Related
i want to play video when item gets active class in bootstrap slider below is my code
<div class="item" id='mobileapp'>
<video loop controls width="100%" id='video'>
<source src="../../vid.mp4" width="100%" height="100%" type="video/mp4"> Your browser does not support the video tag.
</video>
<div class="overlay"></div>
<div class="carousel-caption">
<h1 class="super-heading text-white">Heading</h1>
<div class='row'>
<div class='col-sm-2 col-sm-offset-1'>
<img src='../img/googleplay.png' class='img-responsive hidden-xs' />
</div>
<div class='col-sm-2'>
<img src='../img/applestore.png' class='img-responsive hidden-xs' />
</div>
</div>
</div>
</div>
Js
<script>
$(document).ready(function () {
if ($('#mobileapp').hasClass('active')) {
$('#video')[0].play();
}
else {
$('#video')[0].pause();
}
})
</script>
active class gets added but it does not pay video
the functions 'play' and 'pause' are not jquery functions, they belong to the DOM element. Now to make it work try to execute your code every 10 miliseconds or something like that.
Try:
var videoElt = document.getElementById('video');
$(document).ready(function () {
setInterval(function () {
if ($('#mobileapp').hasClass('active')) {
videoElt.play(); // to play the video
}
else {
videoElt.pause(); // to pause the video
}
}, 10);
});
I have a page with few HTML5 video players, and i want to play all of them in 0.5x speed. I have shown js snippet that runs for single video player only.
<script type="text/javascript">
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 1.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
</script>
This works for first video only. I need it for every video. Below is a snippet of a part of html.
<ul class="regular slider">
<li class="videodiv" style="background-image: url('boxing.jpg')">
<video preload="yes" loop>
<source src="12950321.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
<li class="videodiv" style="background-image: url('coding.jpg')">
<video preload="yes" loop>
<source src="14019065.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
<li class="videodiv" style="background-image: url('dance.jpg')">
<video preload="yes" loop>
<source src="12950321.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
</ul>
Change in Javscript file as:
<script type="text/javascript">
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 1.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
var videos =document.querySelectorAll('video');
for (var i=0;i<videos.length;i++)
{
videos[i].playbackRate = 3.0;
}
</script>
The mistake is as you use querySelector , it returns one video object.
As the querySelectorAll,returns the array of objects (as all video tag) .So you have to iterate the array and increase the speedrate of video.
Hope it may helps.
Happy Coding!!
This is because querySelector only returns the first element.
You can use querySelectorAll instead if you want to access multiple video tags.
querySelectorAll will return an array of all your videos, then you will need to loop them to apply your defaultPlaybackRate.
Example:
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++){
videos[i].playbackRate = 0.5;
}
So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});
Im really new to JavaScript and I started a new project that consists in a video player and editor.
I have this modal Box:
<div class="modal" id="myModal">
<div class="modal-header">
</div>
<div class="modal-body">
<video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
</div>
<div class="modal-footer">
</div>
</div>
And I have this video previews that I've done like this:
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" class="image" alt="">
<div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" alt="" class="image" />
<div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>
What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.
For that I've tried to do this in JavaScript:
<script>
function Video()
{
var Source = $("#video1 source").attr("src");
$('#ModalVideo video source').attr('src', Source);
$("#ModalVideo video")[0].load();
}
</script>
Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?
Thank you for your help, if you have any questions or suggestions please address them to me.
<div id="myModal" class="modal">
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
If you have a basic modal, you can change the source of video and start to play.. but first, stay away to use same id into different tags in same page. Second; to use "this" as a parameter, is more simple way to catch clicked div or another tag...
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" class="image" alt="" data-video-src="images/movie.mp4.mp4" data-autoplay=1 data-muted=1 />
</article>
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" alt="" class="image" data-video-src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" data-autoplay=1 data-muted=1 />
</article>
When you use "this" as a parameter, dont need any id to find which div was clicked.
<script>
function Video(t){
var src = $(t).attr("data-video-src");
var autoplay = $(t).attr("data-autoplay");
var muted = $(t).attr("data-muted");
if(muted==1)
$("#video1").attr("muted",true);
else
$("#video1").removeAttr("muted");
$("#video1").find("source").attr("src",src);
if(autoplay==1){
$("#video1").attr("autoplay",true);
$("#video1").play();
}else{
$("#video1").removeAttr("autoplay");
$("#video1").pause();
}
}
</script>
change <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video> to <video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video> first.
Attach this function to all your div's of class="video" click event
function Video()
{
var Source = this.getElementsByTagName("video")[0].src;
videoPreview.src = Source;
}
You're on gears now.
I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.
Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support.
https://github.com/Giorgio003/Youtube-TV
I have followed all the installation instructions, but cannot seem to get it to work.
This is my page:
<!DOCTYPE html>
<html>
<head>
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="src/ytv.js" type="text/javascript"></script>
</head>
<body>
<div>
Testing YouTube Playlist
</div>
<div id="YourPlayerID"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var controller = new YTV('YourPlayerID', {
channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg'
});
});
</script>
</body>
</html>
In ytv.js I included my API key
(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...
The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for #YourPlayerID looks like this:
<div id="YourPlayerID" class="ytv-canvas">
<div class="ytv-relative">
<div class="ytv-video">
<iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe>
</div>
<div class="ytv-list">
<div class="ytv-list-header">
<a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank">
<img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg">
<span><i class="ytv-arrow down"></i>My Name</span>
</a>
</div>
<div class="ytv-list-inner">
<ul>
<li class="ytv-active">
<a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:42</span>
<img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg">
</div>
<div class="ytv-content">
<b>Skin 4144</b>
<span class="ytv-views">1 Views</span>
</div>
</a>
</li>
<li>
<a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:16</span>
<img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg">
</div>
<div class="ytv-content"><b>Nebula 6044</b>
<span class="ytv-views">0 Views</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But no video or playlist appears on the page. Can anyone see what I am missing?
I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.