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;
}
Related
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 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>
I have a tabs menu (three tabs) with a html-video into each tab (three videos).
My problem is when one video is playing, changing tab I can play another video but the first continues playing.
When I click on a tab I need to stop or pause the videos from the other tabs (if are playing)
This is the tabbed menu code:
<ul class="tabs-menu">
<li class="current">Video1</li>
<li>Video2</li>
<li>Video3</li>
</ul>
And the tabs:
<div class="tab">
<div id="tab-1" class="tab-content">
<div class="video">
<video id="video01" width="640" height="480" controls>
<source src="video1.mp4" type="video/mp4">
</video>
</div>
<div id="tab-2" class="tab-content">
<div class="video">
<video id="video02" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="video">
<video id="video03" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
Any suggestions? Thanks in advance ;-)
When a tab is clicked, you pause all 3 videos for all tabs
, and then start the video belonging to the actual tab.
Something similar to this:
//set click event handler to whenever a tab is clicked
$('.tab-content').on('click' , function(){
//stop all video on page
$.each( $('.video'), function( key, value ) {
$(this)[0].pause();
});
//start the video belonging to the tab that was clicked.
$(this).find('video')[0].play();
});
This is the code for "a links" in tabs (javascript):
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
document.querySelector('#myvideo').pause();
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
Here I introduced a line to pause the first video (#myvideo) when I click to another tab. Can I use several IDs?
I was facing the same problem within pageable container section's. I was using the Flowplayer video plugin within each section. I could solve the issue with following code:
/* video player in carousel to pause on click on next carousel item */
jQuery("ul.vc_pagination li.vc_pagination-item").not('.vc_active').find('a').click(function() {
var vid_id = jQuery('.vc_tta-panels .vc_tta-panel.vc_active .flowplayer-video').attr('id');
flowplayer('#' + vid_id + '').pause();
});
I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.
it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html
I'm just wondering how to change src attribute value using jQuery after clicking a link. I want when user click a link on the webpage, a new video will be played as a transition to another page. Here's what my html and jquery look like right now:
<script type = "text/javascript" src = "jquery-1.10.2.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("a").click(function() {
//alert("Test");
$("#vid source:nth-child(1)").attr("src","Media/bar-transition.mp4");
$('#vid source:nth-child(2)').attr("src","Media/bar-transition.webm");
$('#vid source:nth-child(3)').attr("src","Media/bar-transition.ogv");
$('#vid')[0].play();
});
});
</script>
<body onload = "setTimeout(showIt,3000)">
<div id="main">
<video id="vid" autoplay />
<source src="Media/test-vid-rev.mp4" type="video/mp4" />
<source src="Media/test-vid-rev.webm" type="video/webm" />
<source src="Media/test-vid-rev.ogv" type="video/ogg" />
Your browser do not support the video type
</video>
<div class="nav-transition">
<ul id="nav">
<li id="graphic"> </li>
<li id="product"> </li>
<li id="digital"> </li>
<li id="view"> </li>
</ul>
</div>
</div>
when I clicked the link("#g","#p",etc), the video source doesn't get changed..is there anything wrong with my jQuery syntax? Can anybody help? I'm a newbie to jQuery..
Thx
-zangetsKid
I think you need to add
$('#vid')[0].load()