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
Related
I'm trying to add javascript functionality that will return gps coordinates from exif data when the user clicks on a jpg displayed on the page. (Will use that to open a google map). I have managed to produce a working example when the script is inline in the html file, but not when trying to use a separate script file, getCoords.js
Found a similar question here: How to pass images from server to function in JavaScript?
What I'm trying to do is pass the src attribute from the html click event into the script. The script is getting the src, I can print that to the console and launch the jpg in devtools by clicking on the link in the console. But it doesn't seem to be even trying to run
EXIF.getData(my_image, function() {...
Here's the HTML:
<html lang="en">
<head>
<title>Map Test Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<script src="getCoords.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js">
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMLVQ6kCIfX4c8vVHa0qOf8P87DxCvt2w">
</script>
</head>
<body>
<picture>
<source media="(min-width: 750px)" srcset="images/van_from_erp2_L.jpg 2x, images/van_from_erp2_m.jpg 1x" />
<source media="(min-width: 450px)" srcset="images/van_from_erp2_m.jpg" />
<img src="images/van_from_erp2_s.jpg" id="hiking_0" alt="View of Vancouver from ridge" onclick='getCoords(src)'>
</picture>
<picture>
<source media="(min-width: 750px)" srcset="images/creek_1_l.jpg 2x, images/creek_1_m.jpg 1x" />
<source media="(min-width: 450px)" srcset="images/creek_1_m.jpg" />
<img src="images/creek_1_s.jpg" id="hiking_1" alt="forest creek image" onclick='Hello(id)'>
</picture>
<!--div id="map"></div-->
</body>
</html>
and here's the script:
function getCoords(source) {
console.log(source);
//pass image to EXIF.js to return EXIF data (EXIF.js sourced from github)
let my_image = new Image();
my_image.src = source;
console.log("hello from line 7");
EXIF.getData(my_image, function() {
console.log("Hello from line 9");
myData = this;
console.log(myData.exifdata);
// get latitude from exif data and calculate latitude decimal
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator;
var latDirection = myData.exifdata.GPSLatitudeRef;
var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
//console.log(latFinal);
// get longitude from exif data and calculate longitude decimal
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
//console.log(lonFinal);
let site = [latFinal, lonFinal];
console.log(site);
return(site);
// Create Google Maps link for the location
//document.getElementById('map-link').innerHTML = 'Google Maps';
});
//};
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + (minutes/60) + (seconds/360000);
if (direction == "S" || direction == "W") {
dd = dd * -1;
}
return dd;
}
}
Put EXIF.getData(my_image, function() {...} inside the image onload function:
my_image.onload = function() {
EXIF.getData(my_image, function() {...}
}
Note that you have to wait for the image to be completely loaded,
before calling getData or any other function. It will silently fail
otherwise. Docs
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>
Please have a look at the code below:
function longSentenceSpeak(text)
{
var url = "http://www.translate.google.com/translate_tts?tl=en&q="+finalString;
var url2 = "http://www.translate.google.com/translate_tts?tl=sp&q="+finalString;
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src=url;
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
audio.onerror = function()
{
var url2 = "http://translate.google.com/translate_tts?tl=en&q="+text;
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src = url2;
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
};
}
Below is my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/TTS.js"></script>
<script>
function longText()
{
longSentenceSpeak("hello world ");
}
</script>
</head>
<body>
<audio id="audio">
<source id="source" src="" type="audio/mp3" />
</audio>
<div><button onclick="longText()">Click me</button></div>
</body>
</html>
However this gives this error, even though it should handle it:
Failed to load resource: the server responded with a status of 404 (Not Found) (12:49:15:455 | error, network)
at http‍://www.translate.google.com/translate_tts?tl=en&q=hello
What I want to do is, if this error occurred, I want to use var url2 instead of var url in function longSentenceSpeak(text). How can I do this?
The error event doesn't bubble and in this case, it will fire on the <source> elements.
You thus need to listen to it from there:
function longText() {
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src = '/foo.bar';
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
source.onerror = function() {
console.log('handling error event');
};
}
<audio id="audio">
<source id="source" src="" type="audio/mp3" />
</audio>
<div><button onclick="longText()">Click me</button></div>
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>
Using HTML 5, I want to play multiple sounds simultaneously. how can I do it?
Here's what I currently have:
<audio controls="controls">
<source src="audio/(TESBIHAT).mp3" type="audio/mpeg" />
<source src="audio/Dombra.mp3" type="audio/mpeg" />
<embed height="50px" width="100px" src="audio/(TESBIHAT).mp3" />
<embed height="50px" width="100px" src="audio/Dombra.mp3" />
</audio>
With JavaScript and the HTML5 Audio API you could do something like this:
var snd1 = new Audio();
var src1 = document.createElement("source");
src1.type = "audio/mpeg";
src1.src = "audio/Dombra.mp3";
snd1.appendChild(src1);
var snd2 = new Audio();
var src2 = document.createElement("source");
src2.type = "audio/mpeg";
src2.src = "audio/(TESBIHAT).mp3";
snd2.appendChild(src2);
snd1.play(); snd2.play(); // Now both will play at the same time
I have tested this in Chrome v. 20, and it seems to work :)
The <source> tag is used to specify different formats of the same file - such that the browser can choose another format as fallback in case the first one is not supported. That is why your own suggested solution does not work.