I have been following thenewboston's HTML5 video tutorials and have been trying to change bits to use AngularJS. However, I am having trouble with the bar not updating when you click in a different place than where its currently playing at.
My code:
https://github.com/IdrisAbdul-Hussein/portfolio2.git
Essentially, I have a video.html file which loads the video player etc (video.html is included in the repo) which looks like this:
<div id="big_wrapper">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/testVideo.mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton" ng-click="playOrPause()">Play</button>
</div>
<div id="defaultBar" ng-click="clickedBar()">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</div>
The functions that the ng-click's refer to are in my controller.js.
The error that I'm getting is:
TypeError: e is undefined - controller.js(line 53)
However, when I put ng-click="clickedBar(this)" then it gives me the following error:
Error: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value. - controller.js(line 55)
I'm not sure which is more in the right direction and not sure how to solve the problem! Been bashing my head trying to fix this problem for a while.
Any help is appreciated!
Thanks in advance!
In angular expressions this points to current scope object, not to the DOM element like in HTML event attributes.
You need to pass DOM node into your ngClick handler which is available in $event.target:
ng-click="clickedBar($event.target)"
Your "e is undefined" error is because your code expects e to contain the click event. ng-click="clickedBar() does not pass the event to clickedBar. Try ng-click="clickedBar($event)"> instead.
Related
Here's my simple AlpineJS code -
<div x-data="{show: true}">
<video src="..." onended="show=false"></video>
</div>
I'm wondering why is this not working? No error is thrown.
Because you're trying to use native JS with AlpineJS. Instead, use x-on:
<video x-on:ended="show=false">
Under jQuery 2.2.4, the below code was working. But after switching over to Bootstrap 4 and jQuery 3.5.1, it stopped working and I saw the error:
Uncaught TypeError: Cannot read property 'indexOf' of undefined
I was able to determine that the error was happening at the moment of attempting to use the load() method on the <video> container - but the container exists (el.length() == 1) and literally nothing else changed other than jQuery/Bootstrap.
HTML:
<div class="vlink"><div class="vid" id="bl">[ Video 1 ]</div></div>
<div class="vlink"><div class="vid" id="bg">[ Video 2 ]</div></div>
<div id="lb" class="absoluteDiv flex-parent">
<div id="inner" class="flex-parent">
<div id="closex"> × </div>
<div id="lbBody">
<div id="videoDiv">
<video id="video" width="700" controls><source id="vidsource" src="" type="video/mp4"></video>
</div>
<div id="explan"></div>
</div>
</div>
</div>
javascript/jQuery:
let id = this.id;
$('#vidsource').attr('src', './vid/'+id+'.mp4');
$('#video').load().attr('autoplay', true);
Solution:
Under Bootstrap4 / jQuery 3.5.1, it is necessary to set the src attribute on the <video> container itself (just totally ignore the <source> element.
Also, use attributes on the <video> container to force play:
let id = this.id;
$('#video').attr('src', './vid/'+id+'.mp4').attr('autoplay', true);
There is one report that this has something to do with the files being referenced in nested tags, specifically in webkit browsers.
Source:
https://stackoverflow.com/a/7993347
I am trying to write a button with scrollTo(); but it doesn't seem to be working. Also, is there any way to get this function to work so it scrolls to an element (in my case a nav bar...) rather than pixel coordinates?
Here is my code:
<figure id="LoadVideo">
<button type="button" onclick="ScrollDown()"> Scroll Down</button>
<script>
function scrollDown(){
window.scrollTo(0,500);
}
</script>
<video id="LoadVid" autoplay src="images/LoadVid.mov" type="video/mov">
</video>
</figure>
Also if there could be any way to get animation on the button (like to come in after 7 seconds) that anybody can help with that would be awesome!
Thanks so much!
M.C.
Well there is no lick event :) (you must mean click) so onclick and function names are case sensitive so call scrollDown and not ScrollDown
figure{height:2000px;}
<figure id="LoadVideo">
<button type="button" onclick="scrollDown()"> Scroll Down</button>
<script>
function scrollDown(){
window.scrollTo(0,500);
}
</script>
<video id="LoadVid" autoplay src="images/LoadVid.mov" type="video/mov">
</video>
</figure>
For the other question, you can get the element you want to scroll to, gets its Y offset and scroll to that, or you can use the element.scollIntoView() method.
I have a website with some JS accordions on it, they do not open, however they do on codepen. I have looked in the console on chrome and I go no error messages. However when I looked in the console in Firefox I get the following error message 7 times:
HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://xurbia.tk/alpha/homebeta.html failed. homebeta.html
All candidate resources failed to load. Media load paused. homebeta.html
I have no idea what is going on here so any help is much appreciated.
The relevant code for one of the accordions is as follows:
<dt>
<a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
<img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-left"/>
Detox
<img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-right"/></a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<img src="http://xurbia.tk/alpha/pictures/accordian%20pictures/Detox.PNG" width="100%" height="100%" />
<audio controls>
<source src="" type="audio/wav" width="100%">
Your browser does not support the audio element.
</audio>
</dd>
The full code can be found here:
http://xurbia.tk/alpha/Stackoverflow.txt
Here is the code-pen where I started making the accordions:
http://codepen.io/shardros/pen/OyJqzj
Here is the website that they do not work on:
http://xurbia.tk/alpha/homebeta.html
On the live site, your JavaScript is written using the module pattern...which is good.
This pattern uses an immediately invoked function expression (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
This means that as soon as the function is declared, it is invoked (and executes).
Because you have this script in the <head> section of your page, it executes before the DOM has loaded (before your actual page loads).
This means that your JavaScript tries to add event listeners and manipulate elements that do not yet exist!
In order to fix this, move the <script> tag out of <head> and place it as the last element within the <body> tag.
This will have the effect of the JavaScript being invoked after all necessary elements have been created.
(Your example works in Codepen because they execute the JavaScript after the DOM has loaded)
Your problem is that your JS is executing before the page is loaded. It's good practice to insert your JS at the end of the <body> element to improve page load speed.
You could also use an event to fire after the page loads like this:
window.onload = function(){
//Page has loaded
}
first of all i'm not sure if i'm in the right topic for this if i'm not, please tell me but anyway, i have this code
<audio id="radioplayer" src="http://habbohol.radioca.st/;" autoplay="autoplay" ></audio>
<div id="play"></div>
<div id="stop"></div>
<div id="volup"></div>
<div id="voldown"></div>
It's for my site and i'm trying to get them to work, but when its in a div the buttons never play/stop/go up/down but if it's in a image or word for example it plays just fine, the odd thing it was working earlier in a div with the exact same code but with different div codes. It would be really appreciated if you could help, I believe this is Javascript but i'm not paralytically sure tbh
I listened the music but your divs are empty if you want to see your link you need put a string into you div like: <div>Button</div>
I think you forgot to put the semicolon after what's in the onclick quotations.
Try this (assuming the functions in themselves work):
<div id="play"></div>