I've been searching for a way to make my embedded playlist start with a random video.
This is what I tried:
<iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(rand(1,11)) ?>?rel=0&autoplay=1&showinfo=0&controls=0&authide=0&iv_load_policy=3&?modestbranding=1" frameborder="0" allowfullscreen></iframe>
Sadly, this does not work for some reason. Neither did it with echo. Other solutions (as well few on stackoverflow https://shrty.top/j) did not work either.
Any ideas?
Got it. This works:
<html>
<head>
<script>
var videos = ["https://www.youtube.com/embed/9bZkp7q19f0", "https://www.youtube.com/embed/dQw4w9WgXcQ"];
window.onload = function () {
var playerDiv = document.getElementById("random_player");
var player = document.createElement("IFRAME");
var randomVideoUrl = videos[Math.floor(Math.random() * videos.length)];
player.setAttribute('width', '640');
player.setAttribute('height', '390');
player.setAttribute('src', randomVideoUrl);
playerDiv.appendChild(player);
};
</script>
</head>
<body>
<div id="random_player" />
</body>
</html>
Related
I want to have JavaScript to get a user's URL and return the source code of the website. I want to have this to essentially make an iframe, but with the actual code.
E.g. :
let userUrl = prompt("What website do you want displayed?","e.g. https://www.google.com");
function getSource(url){
//some code
return pageSource;
}
document.body.innerHtml=getSource(userUrl);
I tried to scrape a view page source website and turn it into an API that I could inject into JavaScript, but I had no luck.
<html>
<head><meta charset="us-ascii">
<title></title>
<script>
let userUrl = prompt("What website do you want displayed?","e.g.
https://www.google.com");
if (userUrl){
var srcFrame=""; //complete page code to inject into your iframe or return
var fetchMe = "https://example.com?q=" + userUrl;
fetch(fetchMe).then((response) => response.text()).then((text) => {
srcFrame = text;
//if injecting into iframe
myFrame.document.open();
myFrame.document.write(srcFrame);
myFrame.document.close();
// USE THE FOLLOWING TO ADD THE ORIGINAL URL AS THE baseURI SO RELATIVE
//LINKS & SCRIPTS WILL WORK AND ACCESS THE ORIGINAL SOURCE AND NOT YOUR
//SERVER
var addOrigBase= document.createElement('base');
addOrigBase.setAttribute('href',userUrl);
document.getElementById("myFrame").contentDocument.head.appendChild(addOrigBase);
});
};
</script>
</head>
<body>
<iframe onload="myFrame.frameElement.height =
(myFrame.frameElement.contentDocument.body.clientHeight)+10" frameborder=""
height="25px" id="myFrame" name="myFrame" scrolling="no" src="about:blank"
width="100%"></iframe>
</body>
</html>
I need to append the iframeFooter to the actual iframe. I tried the following:
var media = document.getElementById('media');
var foot = document.getElementById('iframeFooter');
media.appendChild(foot);
console.log(media);
and also:
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
$(function(){
var media = $("#media").contents().find('body');
media.append($('#iframeFooter'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id='media' src="https://www.google.com/maps/d/embed?mid=1EhOE6w1_iHeWWpE_Y52YQjVKf3jxXOV6" ></iframe>
<div id="iframeFooter"><span style="background-color:grey">click pin for details of gas leak</span></div>
I'm really new to JavaScript so that I don't know how would I embed a video that will change every day. Example video 1 is for Monday and video 2 is for Tuesday something like that. I'd created something similar to this situation but for images only. Don't know how would I make it in video. Can anyone help me please?
This is my sample approach in which images are changing depending on what date was set on your PC and its working really well.
<!DOCTYPE html>
<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function(){chgDailyVideo();}
function chgDailyVideo()
{
var vid_array = new Array();
vid_array[0] = "sundaypic.jpg"
vid_array[1] = "mondaypic.jpg"
vid_array[2] = "tuesdaypic.jpg"
vid_array[3] = "wednesdaypic.jpg"
vid_array[4] = "thursdaypic.jpg"
vid_array[5] = "fridaypic.jpg"
vid_array[6] = "saturdaypic.jpg"
var txt_array = new Array();
txt_array[0] = "Hi Im Sunday"
txt_array[1] = "Hi Im Monday"
txt_array[2] = "Hi Im Tuesday"
txt_array[3] = "Hi Im Wednesday"
txt_array[4] = "Hi Im Thursday"
txt_array[5] = "Hi Im Friday"
txt_array[6] = "Hi Im Saturday"
var d = new Date();
var i = d.getDay();
document.getElementById("dailyVid").src = vid_array[i];
document.getElementById("dailyTxt").innerHTML = txt_array[i];
}
</script>
<style type="text/css"></style>
</head>
<body>
<p id = "dailyTxt">Hi I'm Sunday</p>
<img src = "sundaypic.jpg" alt"daily vid" title = "daily pic" id="dailyVid"/>
</body>
</html>
Just use <video> tag instead of <img> and let the last two lines remain the same:
document.getElementById("dailyVid").src = vid_array[i];
document.getElementById("dailyTxt").innerHTML = txt_array[i];
// the above line will show up in case <video> isn't supported.
Note that you can only use videos ending with extensions ogg, mp4, etc and the above is the simplest form of how you could embed a video. See the link to know more about it.
Learn more
Hi there i am currently working on HTML5 Jquery video player.
Here you can get more info about this HTML video player: http://www.videojs.com/docs/api/
From this link you can see that myPlayer.duration() is the function that must show the video durration in seconds. And that's it i just want to display this value in simple HTML page like i am trying with my code.
This is my code:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
data-setup="{}">
<source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
</video>
<div id="duration"></div>
<script type="text/javascript">
var myPlayer = _V_("vemvo-player");
_V_("vemvo-player").ready(function(){
var howLongIsThis = myPlayer.duration();
$('#duration').html('Duration: ' + howLongIsThis);
});
</script>
The problem with this code is that it's showing Duration: 0 when the video duration is far from 0.
My video player is working okey and it's showing durration of the video correctly.
My question is how i can show this durration in HTML page value?
With the code above when i post var myPlayer = _V_("vemvo-player"); into _V_("vemvo-player").ready(function(){ function and i try in the console to run myPlayer.duration() it gives me error for Undefined variable, but when var myPlayer = _V_("vemvo-player"); is outside the function like it is in my post and i type myPlayer.duration() in the console it's giving me the durration in seconds like i need it.
The problem is that i can display this variable as a number in HTML page.
I just want to display this number in HTML page.
Where is the mistake in my code and how i can fix it?
Thanks in advance!
<script type="text/javascript">
var myPlayer = _V_("vemvo-player");
_V_("vemvo-player").ready(function(){
// Any ready/init code you want here
$('#duration').html('Duration: ');
});
myPlayer.addEventListener('loadedmetadata', function() {
$('#duration').html('Duration: ' + myPlayer.duration);
});
</script>
Source
Have you tried to keep the variable declaration outside the function, but the assignment inside?
<script type="text/javascript">
var myPlayer;
_V_("vemvo-player").ready(function(){
myPlayer = _V_("vemvo-player");
var howLongIsThis = myPlayer.duration();
$('#duration').html('Duration: ' + howLongIsThis);
});
</script>
I am trying to add a new VideoJS object and set it up entirely from JS, without having a DOM video element.
The result is that the video is loaded but there aren't any VideoJS controls.
Here is the code:
obj = document.createElement('video');
$(obj).attr('id', 'example_video_1');
$(obj).attr('class', 'video-js vjs-default-skin');
var source = document.createElement('source');
$(source).attr('src', path);
$(source).attr('type', 'video/mp4');
$(obj).append(source);
$("#content").append(obj);
_V_("example_video_1", {}, function () {
//
}
});
I will appreciate any help, thanks!
Okay took a look at video-js, it's quite nice. Try this:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<div id="content"> </div>
<!-- appending video here -->
<hr />
<!-- written in html -->
<video id="example_video_by_hand" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
</body>
</html>
JavaScript:
var obj,
source;
obj = document.createElement('video');
$(obj).attr('id', 'example_video_test');
$(obj).attr('class', 'video-js vjs-default-skin');
$(obj).attr('width', '640');
$(obj).attr('data-height', '264');
$(obj).attr('controls', ' ');
$(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg');
$(obj).attr('preload', 'auto');
$(obj).attr('data-setup', '{}');
source = document.createElement('source');
$(source).attr('type', 'video/mp4');
$(source).attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4');
$("#content").append(obj);
$(obj).append(source);
Working example on jsbin.
Updates:
As polarblau pointed out in a comment the jQuery.attr() can take an object rather than having to call jQuery.attr() multiple times like in my first example.
note: The below is just an example and not a working demo.
var attributes = {
'id': 'example_video_test',
'class': 'video-js vjs-default-skin',
'width': '640',
'data-height': '264',
'controls': ' ',
'poster': 'http://video-js.zencoder.com/oceans-clip.jpg',
'preload': 'auto',
'data-setup': '{}'
}
var element = $('<video/>').attr(attributes)
//you would also have to add the source element etc but this gives
//a good example of a shorter approach