I'm having a problem with the YouTube api:
I'm developing a website and I want to have a video to start when I open his relative image: I used this code for the first of them and it work:
<script>
// 2. This code loads the IFrame Player API code asynchronously.
// var tag = document.createElement('script');
// tag.src = "https://www.youtube.com/iframe_api";
//var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fa fa-times"></i>
Chiudi</button>
</div>
now, if i put the same code in another photo with another video on the same page it doesn't work adn gives me this error:"TypeError: Cannot read property 'parentNode' of undefined".
(if I click others photo it doesn't display the video even if I change the reference) (I'm pretty new to boostrap and js)
if you can give me some hints I would appreciate, thanks and have a nice day
(sorry for my broken english)
please try this code because of i am not understand your quotation you can used this code. i think this code useful.
As in the question you mention only to have two video tag with the same sources, here is a possibility.
The idea is the following:
<--script-->
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#myvideo source.active");
var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
myvid.src = nextsource.src;
myvid.play();
});
<!--html-->
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
Related
I am trying to create an HTML video playlist and currently I am using vid.onended to detect when a video is done playing (based of the current video src) and then play the next video when the video ends. This works perfectly for the first video but for some reason it never plays the second video and jumps straight to the third video.
My code:
//add video playlist functionality to auto play next video based on id
var vid = document.getElementById("urlVideo");
vid.onended = function() {
var video0 = "http://techslides.com/demos/sample-videos/small.mp4";
var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
var video2 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
if (vid.src = video0) {
vid.src = video1;
}
if (vid.src = video1) {
vid.src = video2;
}
};
<video id="urlVideo" width="100%" height="460" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
What am I doing wrong?
Edit:
Answer by Alen Toma works perfectly.
I Also managed to do it according to the current video source based on a comment by Quentin, For anyone else looking for how to do it explicitly with the current video source as the variable/condition, please see
https://jsfiddle.net/redlaw/qjb5h7e9/9/
I did make a small example below, it should help.
Have a look at this JSFiddle.
//add video playlist functionality to auto play next video based on id
var videoSrc = [
"https://media.w3.org/2010/05/sintel/trailer.mp4",
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
]
var vid = document.getElementById("urlVideo");
var index = 0;
vid.addEventListener("ended", function() {
var currentSrc = videoSrc[index];
index += 1;
if (index >= videoSrc.length)
index = 0; // Make Loop and jump to the first video
vid.src = currentSrc;
vid.play();
console.log(currentSrc)
}, true);
<video id="urlVideo" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
you must use an event listener for your video player like this code:
var vid = document.getElementById("urlVideo");
vid.addEventListener("ended", function() { /* your code*/ }, true);
I am using Video.js and I want to play both YouTube and mp4 videos. I have the following code for my player
<video id="my-video" class="video-js vjs-big-play-centered" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }' width="1250" height="900" poster="" data-setup='{" techOrder ": ["youtube "]}'>
<source src="https://www.youtube.com/watch?v=_Z_Se7eJNiM" type='video/youtube'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
Here is the code used to change the source whenever a link with the id (source_one) is clicked:
var a = document.getElementById('source_one');
a.addEventListener('click', function() {
document.getElementById("my-video").children[0].src = "http://example.com/video.mp4";
})
The Problem is that i cannot find a way to change the source type to video/mp4, using src changes the source of the video but does not change the type.
I just found out the Solution! Thanks for the answers so far.
var a = document.getElementById('source_one');
a.addEventListener('click', function(e) {
e.preventDefault();
var player = window.player = videojs('my-video');
var vidlink = $(this).attr('href');
player.src({
src: 'http://example.com/test.mp4',
type: 'video/mp4'
});
})
You could try this
document.getElementById("my-video").children[0].setAttribute("type", "video/mp4");
As 'Bas Pauw' said load() is the key.
Just an example for Javascript without libraries:
Courtesy w3schools.
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls>
<source id="mp4_src" src="https://www.w3schools.com/tags/mov_bbb.mp4">
</video>
<script>
function myFunction() {
document.getElementById("mp4_src").src = "https://www.w3schools.com/tags/movie.mp4";
document.getElementById("myVideo").load();
}
</script>
You should change the source with Video.js's API.
videojs('my-video').src({
src: 'http://example.com/video.mp4',
type: 'video/mp4'
});
Directly manipulating a source element won't work when the player is initialised. You need to use the src() API so that Video.js can load the right tech for the source, e.g. Html5 or YouTube.
I'm trying to use a button to change the audio track to 1 of 2 being played in the browser, however, the method I found switches to the second track but doesn't change the audio played afterwards, it only restarts the second track. Here's my code:
function loadSong(){
var player=document.getElementById('player');
var source1=document.getElementById('player');
var source2=document.getElementById('player');
source1.src='/audio/mac+.mp3';
source2.src='/audio/mac-slowed.mp3';
player.load(); //just start buffering (preload)
player.play(); //start playing
}
HTML
<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
<source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
<source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>
Based on the information you provided in your original inquiry, this is most likely the best fit for you. Attached is a working JSFiddle for you review. You will need to update the src files with your own locally stored files.
HTML:
<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>
Javascript:
var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');
player.onclick = function() {
curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
if (curTrack == "1") {
nextTrack = "2";
source1.play();
source2.pause();
source2.currentTime = 0;
} else {
nextTrack = "1";
source2.play();
source1.pause();
source1.currentTime = 0;
}
this.innerHTML = "Switch the music to track # " + nextTrack;
}
You are overwriting the #player element look at your code you are saving the same selector to source1 and source 2 so change the selector of source one to source1 and source2
I am currently working on embedding a youtube video into a website.
I have created my own custom play and pause buttons, of which one is shown at a given time. If video is playing the pause button is shown, and if the video is paused the play button is shown.
It is working as it should for desktop, however, when testing on the iOS simulator both buttons are showing and display:none does not appear to work.
Has anyone seen this before? What is the solution? It seems like very strange behavior. Also, when I test in chrome and check what it looks like on the iPhone it works as expected, however the simulator shows different behaviour.
Please see my code below. Oddly enough, the same error is shown in the code below, when you run the code snippet, however, as mentioned earlier when I test on chrome it works perfectly.
<style>
#pause-button {
display: none;
}
</style>
<script type="text/javascript">
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the video iframe
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
// call this function when player changes state i.e. when video ends
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
playButton.style.display = "none";
pauseButton.style.display = "block";
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
playButton.style.display = "block";
pauseButton.style.display = "none";
});
}
function onPlayerStateChange(event) {
//replay when video ends
if (event.data === 0) {
player.playVideo();
}
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<!-- Make sure ?enablejsapi=1 is on URL -->
<!-- &controls=0 hides controls -->
<!-- &showinfo=0 hides information -->
<!-- &rel=0 prevents related video been shown at the end -->
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YXsGr21GD0M?enablejsapi=1&html5=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
<div class="buttons">
<!-- if we needed to change height/width we could use viewBox here -->
<svg class="button" id="play-button">
<use xlink:href="#play-icon">
<path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
</use>
</svg>
<svg class="button" id="pause-button">
<use xlink:href="#pause-icon">
<path id="play-icon" data-state="paused" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
</use>
</svg>
</div>
<use> tags render what they point to, they aren't supposed to render their children.
The href (SVG2) or (xlink:href (SVG 1.1) attribute of a <use> tag should point to your paths via the id of the path.
In your case you could probably remove the tags altogether and just have paths which you could show or hide.
How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.
Below is some approach that I have tried but none are working:
videoPlayer.WebKitPlaysInline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "WebKitPlaysInline";
videoPlayer.webkit-playsinline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "true";
videoPlayer.WebKitPlaysInline = true;
videoPlayer.webkit-playsinline = "true";
videoPlayer.webkit-playsinline = true;
My current code(js):
function loadPlayer() {
var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
videoPlayer.autoplay = "autoplay";
videoPlayer.WebKitPlaysInline = true;
document.getElementById("vidPlayer").appendChild(videoPlayer);
nextChannel();
}
My current code(html):
<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->
<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->
Any helps are much appreciate. Thanks.
You can do this without jQuery:
var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');
You have to activate this functionality in your iOs application's WebView :
webview.allowsInlineMediaPlayback = true;
You can check this post for more details:
HTML5 inline video on iPhone vs iPad/Browser
You need to attach it to the video element and set it as video's attribute
such as :
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
so you could do (with jQuery) :
$('video').attr('webkit-playsinline', '');