I am trying to build a client side solution for a HTML5 video playlist, I cannot use AJAX or XML for this project and it is causing me some issues.
Basically I have a video tag loading in one video and then an unordered list called 'playlist' that has all my videos in it. I have it working so that it can play either Mov's or Ogv's out of one page as a playlist but I cannot get a fallback working within the list. I am a little stuck, I have read that browser sniffing is old practice but cannot come up with a solution. Any help would be greatly appreciated!
Here is my code so far -
**HTML**
<!-- /playlist -->
<div class="span2">
<ul id="playlist">
<li class="active">
<img src="images/video/image1.jpg" style="margin-bottom:21px;">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /playlist -->
<!-- /video -->
<div class="span9">
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" />
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
<img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" />
<p> Your video tag is not supported</p>
</video>
</div>
<!-- /video -->
**Javascript**
<!-- Video Playlist START -->
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('#video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
video[0].volume = .60;
video[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),video[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
<!-- Video Playlist END -->
**HTML**
<!-- /playlist -->
<div class="span2">
<ul id="playlist">
<li class="active">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /playlist -->
<!-- /video -->div class="span9">
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" />
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
<img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" />
<p> Your video tag is not supported</p>
</video>
</div>
<!-- /video -->
//Javascript
function run(link, player){
$(player).children().eq(0).attr("src",link.attr('href'));
$(player).children().eq(1).attr("src",link.attr('rel'));
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
I have changed your HTML a little bit and then i have changed the "run()" function to replace both the source tags.
Related
I have found this helpful piece of code from the MartinJHiggings website (thank you).
The code is designed to play streaming audio. But it was designed when autoplay in browsers was allowed. It is no longer. But the default image is still 'pause' as it thinks audio is playing.
I basically want the default image to be 'play', which when clicked it should change to 'pause' and start the stream.
When clicked again, the image should change to 'play' and the stream should stop.
Any idea how I can do this please?
<script type="text/javascript">
function audioControl() {
var playdiv = document.getElementById('playdiv');
var pausediv = document.getElementById('pausediv');
var myAudio = document.getElementById('myAudio');
if (myAudio.paused) {
myAudio.play();
pausediv.style.display = 'block';
playdiv.style.display = 'none';
} else {
myAudio.pause();
pausediv.style.display = 'none';
playdiv.style.display = 'block';
}
}
</script>
<audio id="myAudio" autoplay preload="metadata">
<source src="http://IP:PORT/stream"></source>
Unfortunately your browser doesn't support html5 audio streaming, please update your browser.
</audio>
<button id="control" class="control" onclick="audioControl()">
<div id="playdiv" style="display:none">
<img src="play.png" width="96" height="96" alt="Play"/>
</div>
<div id="pausediv" style="display:block">
<img src="pause.png" width="96" height="96" alt="Pause"/>
</div>
</button>
You should remove the autoplay attribute on your audio element and then you should switch your divs style:
playdiv should be with style="display:block"
pausediv should be with style="display:none"
function audioControl() {
var playdiv = document.getElementById('playdiv');
var pausediv = document.getElementById('pausediv');
var myAudio = document.getElementById('myAudio');
if (myAudio.paused) {
myAudio.play();
pausediv.style.display = 'block';
playdiv.style.display = 'none';
} else {
myAudio.pause();
pausediv.style.display = 'none';
playdiv.style.display = 'block';
}
}
<audio id="myAudio" preload="metadata">
<source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"/>
Unfortunately your browser doesn't support html5 audio streaming, please update your browser.
</audio>
<button id="control" class="control" onclick="audioControl()">
<div id="playdiv" style="display:block">
<img src="play.png" width="96" height="96" alt="Play"/>
</div>
<div id="pausediv" style="display:none">
<img src="pause.png" width="96" height="96" alt="Pause"/>
</div>
</button>
Also available on JSFiddle.
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();
});
});
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()