When watching a video, its possible to enter developer mode in the browser and enter the following command in the console to change the playback speed of a video
document.getElementsByTagName('video')[0].playbackRate = 0.9
When I try however to code this in html I am unable to access the video object.
var obj = document.getElementsByTagName('video');
console.log(obj);
returns an object of length 0
also trying
var player1 = document.getElementById("video");
console.log(player1);
player1.playbackRate = 2;
returns null
A demo of the not working code so far is here:
https://jsbin.com/peludojisi/1/edit?html,js,console,output
Can someone please help me figure out how to set the playbackRate from html
many thanks in advance
Jesse
document.querySelector does not work across iframes. Since the video in your example is within an iframe, your query returns null.
The error message in you snippet tells you almost as much:
"TypeError: Cannot set property 'defaultPlaybackRate' of null
at :16:59
Line 16 of your script:
document.querySelector('video').defaultPlaybackRate = 2.0;
Related
I'm working on a tour in webvr and using a-frame to build it. I have a bizarre problem. I seem to be able to get aframe to play a video inside a videosphere and correctly display every second of it the first time I enter a new scene, but whenever I exit from it and try to enter it again, only the sound works as supposed. I'm wondering if I'm doing something wrong in the loading of the video or something
I'm collecting the path to the video from a json file in which I describe what each rooms contains (they may have interactable pins for 16:9 video, images and the sort, and also pins that simply load a new scene).
After loading the json, I set the source of the videosphere, name image360, as such:
document.getElementById("image360").setAttribute('src', "#" + jsonArray.zones[zoneID].locations[locationID].name);
I then play the video using the following code :
video = document.querySelector('#' + jsonArray.zones[zoneID].locations[locationID].name);
video.muted = false;
video.addEventListener("ended", videoEnded);
video.play();
The event listener I add to the video takes care of taking the user back to the previous scene once the video ends, which I do using this code:
//This function is called immediately after the end of a 360 video. Thus it first starts by obtaining the scene it should load after the end of the scene
var thisEl = document.querySelector('#' + jsonArray.zones[zoneID].locations[locationID].name);
var currentLocation = jsonArray.zones[zoneID].locations[locationID];
var locationToReturnTo = currentLocation.locationToReturnTo;
var zoneToReturnTo = currentLocation.zoneToReturnTo;
//With the information obtained, the room is then loaded
generateRoom(zoneToReturnTo, locationToReturnTo);
//After loading the room, time to generate the correct pins
generatePins(zoneToReturnTo, locationToReturnTo);
I'm truly at a loss here, and have no idea why this doesn't work. I should note that javascript and aframe are not my area of expertise at all, I just had to pick up this project after a former colleague of mine, who was working on it, left the company abruptly, so excuse me if I'm making a basic mistake.
Thanks in advance.
Switching videos directly on a entity may not work properly:
document.querySelector("a-video").setAttribute("src", "vid.mp4")
because of the current tmp <video> handling.
You should try using the assets management system:
<a-assets>
<video id="vid" src="derby.mp4"></video>
</a-assets>
<!-- Scene. -->
<a-plane src="#vid"></a-plane>
JS
(#vid).setAttribute("src", "newvid.mp4")
I have a video tag, that I dynamically change its source as I am letting the user to choose from a number of videos from the database. The problem is that, i am getting error while calling the load function
Here is my code:
var video = <HTMLInputElement>document.getElementById('introVideo');
video.src = this.videoUrl;
video.load();`
But doing so i am getting a warning
[ts] Property load does not exists on type HTMLInputElement
I did not test this, but try casting your HTML element to a HTMLVideoElement instead of HTMLInputElement because the method .load() does not exist on HTMLInputElement type.
Cheers.
I have a video.
http://www.redrose.com.br/riosultec/
I know the loop attribute loops from the start, but I would like to loop it after the third second. This is after the logo enters the screen.
I tried many things but I didn't find any solution for this.
I saw another topic about using JavaScript to load the video in a specific point.
I tried to convert it to reload the video and start only at the point I wanted but it didn't work.
This probably can only be done in JavaScript.
Videos have a duration attribute that returns the length of a video. We can also get the currentTime of a video, check if it equals the midpoint, and reset it to 0.
var video = document.getElementById("my-video");
var midway = (video.duration / 2);
setInterval(function() {
if (video.currentTime === midway) {
video.currentTime = 0;
}
},0);
I am using web audio api in my project. Is there a way to record the audio data that's being sent to webkitAudioContext.destination?
.wav files are playing in my browser, so there should be some way to store that data into a (.wav) file . i know this is possible, but not yet find any solution :(
recorder.js can help me, but upto now i found it is only recording the microphone live input, is it possible to record my audio(.wav files) with the help of recorder.js? plz help
i am using this sample for recording https://github.com/mattdiamond/Recorderjs
I have managed to achieve this through a pure WebAudio solution (no Recorderjs needed). You can see it working fully on my discJS project and use the relevant source file to see how my complete code is working. I imagine this is only relevant to recording WebAudio nodes that you are playing yourself programmatically.
First you will need an HTML <audio> to use as a final destination. In this case I choose to show the controls so that the user may easily download the resulting file.
<audio id='recording' controls='true'></audio>
Now for the Javascript mojo:
const CONTEXT = new AudioContext();
var recorder=false;
var recordingstream=false;
function startrecording(){
recordingstream=CONTEXT.createMediaStreamDestination();
recorder=new MediaRecorder(recordingstream.stream);
recorder.start();
}
function stoprecording(){
recorder.addEventListener('dataavailable',function(e){
document.querySelector('#recording').src=URL.createObjectURL(e.data);
recorder=false;
recordingstream=false;
});
recorder.stop();
}
Now the final glue is that whenever you play an audio source, you also need to connect it to your recording stream:
function play(source){
let a=new Audio(source);
let mediasource=CONTEXT.createMediaElementSource(a);
mediasource.connect(CONTEXT.destination);//plays to default context (speakers)
mediasource.connect(recordingstream);//connects also to MediaRecorder
a.play();
}
This is a relatively primitive setup that works fine (tested on Firefox 52 and Chrome 70). For a more proper implementation, see MediaRecorder on MDN.
As found on the github: var rec = new Recorder(source [, config]), where source is an audio node. So it's up to you to put in the right node. If you play .wav files using <audio>, you can send it to the recorder:
<audio id="audio" src="" controls></audio>
var a = document.getElementById('audio');
var context = new webkitAudioContext();
var sourceNode = context.createMediaElementSource(a);
var rec = new Recorder(sourceNode);
Can somebody help me on how to capture audio from default microphone using HTML5?
There are many samples available, but none of them seem to working.
I have tried Audio capturing with HTML5
As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'
There's some great articles on HTML5 Rocks. This is just one that I pulled.
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled
// success callback when requesting audio input stream
function successCallback(stream) {
var audioContext = new (window.webkitAudioContext)();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function errorCallback() {
console.log("The following error occurred: " + err);
}
navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );
make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.
Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.