I'm basically trying to make my buttons work for each video, the videos are generated by the loop itself, fetching the files from my server with the loop as well.
My only problem are the buttons, the videos get generated fine.
I can't seem to wrap my head around the following line, maybe there's even more than just this line I'm not doing right.
var vid[i] = document.getElementById( + [i] + "myVideo");
Am I even doing this right?
<script>
var files = <?php $out = array();
foreach (glob('../medias/aPartager/visuel/*.mp4') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
echo json_encode($out);
?>;
var files, text, fLen, i;
fLen = files.length;
text = "";
for (i = 0; i < fLen; i++) {
text += "<a href='#video'><button onclick='playVid(" + i + ")' type='button'>Play Video</button><button onclick='pauseVid(" + i + ")' type='button'>Pause Video</button><button onclick='enableControls(" + i + ")' type='button'>Enable controls</button><button onclick='disableControls(" + i + ")' type='button'>Disable controls</button><br><video id='" + i + "myVideo' class='video' width='320' height='240' controls><source src='../medias/aPartager/visuel/" + files[i] + "' type='video/mp4'>Votre navigateur ne prend pas en charge la balise vidéo.</video></a>";
var vid[i] = document.getElementById( + [i] + "myVideo");
function playVid(i) {
vid[i].play(i);
}
function pauseVid(i) {
vid[i].pause(i);
}
function enableControls(i) {
vid[i].controls = true;
vid[i].load(i);
}
function disableControls(i) {
vid[i].controls = false;
vid[i].load(i);
}
}
text += "";
document.getElementById("lesVideos").innerHTML = text;
<script>
What it should look like
You don't put the functions for play inside the for loop. It need to be outside of the loop. Also var vid[1] is NOT valid
function playVid(id) {
let element = document.getElementById(id);
element.play();
}
function pauseVid(id) {
let element = document.getElementById(id);
element.pause();
}
<div class="video">
<button onclick="playVid('video-1')" type="button">Play Video</button>
<button onclick="pauseVid('video-1')" type="button">Pause Video</button><br>
<video id="video-1" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div class="video">
<button onclick="playVid('video-2')" type="button">Play Video</button>
<button onclick="pauseVid('video-2')" type="button">Pause Video</button><br>
<video id="video-2" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
OR other option
let videoMap = {}
for (i = 0; i < fLen; i++) {
// Generate HTML first
// Add the video to videoMap and cache it
videoMap[i] = document.getElementById(i);
}
then AFTER the loop finishes to make it all work.
function playVid(id) {
videoList[id].play();
}
function pauseVid(id) {
videoList[id].pause();
}
Related
This is the code:
var meme = "";
meme += '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme += '<video loop class="video" style="max-width: 100%;">';
meme += '<source src="" type="video/mp4" id="video-preview" />';
meme += '</video>';
meme += '<div class="gif_button" style="display: flex;">GIF</div>';
meme += '</div>';
$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('#video-preview').attr('src', URL.createObjectURL(bla.files[0]));
var videoElement = document.getElementById("video-preview");
console.log('wth');
console.log(videoElement.readyState);
videoElement.addEventListener('loadeddata', (e) => {
console.log('hello?');
if(videoElement.readyState >= 3){
readURL(bla);
}
});
videoElement.addEventListener('error', (e) => {
//Video should now be loaded but we can add a second check
makeToast("Invalid Video Format!", "error", 4000);
reset_upload();
});
Console only prints out:
wth
undefined
Whats going on here? It worked yesterday and the video still loads without a problem. I didn't make any changes since yesterday.
addEventListener
isn't doing anything, neither loadeddata nor error
After trying around this is how it works again now:
var meme = "";
meme += '<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">';
meme += '<video loop class="video videopreview">';
meme += '<source src="" type="video/mp4" />';
meme += '</video>';
meme += '<div class="gif_button" style="display: flex;">GIF</div>';
meme += '</div>';
$('#previewholder_area').empty();
$('#previewholder_area').html(meme);
$('.videopreview source').attr('src', URL.createObjectURL(bla.files[0]));
const videoElement = $(".videopreview");
videoElement.get(0).addEventListener('loadeddata', (e) => {
if(videoElement.get(0).readyState >= 3){
readURL(bla);
}
});
videoElement.get(0).addEventListener('error', (e) => {
makeToast("Invalid Video Format!", "error", 4000);
reset_upload();
});
I don't know why it needs to be like that now and why it worked the other way until yesterday
<html>
<head>
<title>Doctor Page</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.onload = function callButtonClickEvent() {
setTimeout(function () { playSound(); }, 2000);
};
$( document ).ready(function() {
$('#source')[0].play();
});
function playSound() {
document.title = "(1) Doctor Page"
var filename = "eventually";
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename + '.mp3">';
document.getElementById("sound").innerHTML = '<audio id="source">' + mp3Source + oggSource + embedSource + '</audio>';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button id="btnplay" onclick="setTimeout(function(){ playSound(); }, 500);">Play</button>
<div id="sound"></div>
</body>
</html>
You're trying to use <audio id ="source"> before creating it. Move the content of playSound to the document.ready block (before $('#source')[0].play();), and the problem is solved (I hope...).
Sorry for my English if I made mistakes.
I have loaded Playlist items in my Home Page like this:
HTML:
<div id="youtube-playlist-feed_1"></div>
<div id="youtube-playlist-feed_2"></div>
<div id="youtube-playlist-feed_3"></div>
My Script to load Playlist is:
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [{
playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
el: '#youtube-playlist-feed_1'
},
{
playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
el: '#youtube-playlist-feed_2'
},
{
playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
el: '#youtube-playlist-feed_3'
}
];
playlists.forEach(function(playlist) {
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el) {
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
Now, I have a separate page i.e. Player.html where I would like to have a YouTube Player and load the videos. For example, if a user clicks on 1st item of the playlist, that should be loaded in Player.html where I have my YouTube Player. How can I achieve this?
In Your script where you are loading playlist items replace this code just htmlString
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="#" onclick="player()"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="#" onclick="player()">' + title + '</a></div></div><input type="text" name="videoid" id="videoid" value="'+videoID+'" hidden>';
At the end of Index.html file:
Past this code:
<script type="text/javascript">
function player() {
var ID = document.getElementById('videoid').value;
document.location.href = 'player.html?vid='+ID;
}
</script>
And in your player.html file
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>
First of all pass VideoID in a href by writing this as a href
<div class="video-wrap"><div class="video">
<a target="_blank" href="player.php?id=' + videoID+ '">
<img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a>
</div>' + '<div class="title"><a target="_blank" href="player.php?id=' + videoID+ '">' + title + '</a></div></div>
Now in Player.php
Use GET method to get your id variable
like : $id = $_GET['id'];
in this file use this code to play video
<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" allowfullscreen></iframe>
In Your Videos displaying html file
you have to write something like this:
<a onclick="player()" >Watch</a>
<script type="text/javascript">
function player() {
videoid = 'a9Vh9TZkdSM'; //Your Video id
document.location.href = 'player.html?vid='+videoid;
}
</script>
And in
Player.html
Something like this:
<div id="display"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>';
document.getElementById('display').innerHTML = output;
}
</script>
I am making a video website and so far I haven't styled it much yet so it's just videos on a blank page.
I have made it so that videos don't buffer until you click the thumbnail on the page. I added code to pause the video when you click it while it's playing and also play it again when it's clicked again.
I set it so the controls show on the HTML video but there's one problem. When you click on the video itself to pause it works fine, but when you click anything on the controls bar at the bottom it also pauses. And on top of that when you click the play/pause button on the actually control bar, the button pauses the video but it then instantly starts playing again because my function for playing when video is clicked fires.
How can I make it so the on click events don't work on the controls bar?
Another issue also is that when in fullscreen, the click on video to pause feature doesn't work at all. How do I fix that? I know that's quite a few questions in one post. Sorry :D
I looked everywhere and couldn't find answers. Heres my HTML and my JavaScript. The website is here: https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Bluebar</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/vidloader.js"></script>
</head>
<body>
<noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>
<div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
<div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
<div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
<div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>
</body>
</html>
and the JavaScript
var cs;
var no;
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;
function cla(){
video = document.getElementById('av');
if(video.paused){
video.play();
}else{
video.pause();
}
};
function vidcl(vid, img, id, wid, hei, imid, hovim){
if(idm !== ''){
document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
}
vidm = vid;
imgm = img;
idm = id;
widm = wid;
heim = hei;
imidm = imid;
hovimm = hovim;
window.location.hash = id;
document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};
window.onkeydown = function(event){
video = document.getElementById('av');
if(event.keyCode === 32){
event.preventDefault();
if(video.paused){
video.play();
}else{
video.pause();
}
}
};
function thumbch(id, ims){
document.getElementById(id).src = ims;
};
function thumbak(id, ims){
document.getElementById(id).src = ims;
};
function fs(){
video = document.getElementById('av');
if(video.requestFullScreen){
video.requestFullScreen();
}else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
};
I figured it out myself. I disabled the default video controls and the context menu so that they the controls can't be re-enabled through it and I made my own controls.
I'm a beginner of JavaScript. I want to play a mp4 file from a specific time for a certain time in HTML5. First, I want to load a thumbnail image. And if it is clicked, I'd like to play the video file from the particular time. This is my code. But it doesn't start from 6. It just starts from the beginning. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function PlayVideo(anchor,vid, start_time, end_time, video_file) {
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>"
var video = document.getElementById(vid);
video.play();
video.currentTime = start_time;
video.addEventListener('timeupdate', function() {
if(this.currentTime > end_time) {
this.pause();
this.currentTime = start_time;
}
});
document.getElementById(aid).style.display = "none";
}
</script>
</head>
<body>
<a id="anchor" onclick="PlayVideo('anchor','003', 5, 9, 'test.mp4');"><img src ="test.jpg" alt="trail" /></a>
</body>
</html>
try
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>";
Notice the
;