How to separate HTML and JS?


#1

Hello guys! I just discovered Meteor and I love it. Now I try to make my own app and this work for me:


<video id="myvideo"><source src="myvideo.mp4" type="video/mp4"></video> <script type="text/javascript"> var myvideo = document.getElementById("myvideo"); myvideo.autoplay = true; </script>

client/hello.html


But this don’t:

<video id="myvideo"><source src="myvideo.mp4" type="video/mp4"></video>

client/hello.html

var myvideo = document.getElementById("myvideo"); myvideo.autoplay = true;

client/video.js


Does anyone have a solution? I have this error: "Uncaught TypeError: Cannot set property ‘autoplay’ of null"
Thanks!


#2

where in client video is this code? It should be in the template rendered callback, because you need to wait for the DOM to be ready with the element before you can use it (and you should also check if document.getElementById actually returns anything before you use it :slight_smile:


#3

Thank you! I tried this:

{{> video}}

client/hello.html

<template name="video"><video id="myvideo"><source src="myvideo.mp4" type="video/mp4"></video></template>

client/templates.html

Template.video.helpers({
something: function () {var myvideo = document.getElementById("myvideo"); myvideo.autoplay = true;}
});

client/video.js

But it’s not working :frowning: I wrote “something” in “client/video.js” because I don’t know what to write…


#4

The helper (might) get called before the template might have been rendered.

Try something like this

Template.video.onRendered(function(){
 var myvideo = document.getElementById("myvideo");
 if(myvideo) myvideo.autoplay = true;
});

another question is why you don’t set autoplay=true in your HTML5 video tag


#6

It’s working it’s perfect! (I don’t set autoplay=true because I use jQuery Mobile and they block the autoplay)
Thank you!!


#7

Great, we all love video that starts playing automatically on mobile … :wink:


#8

Haha, jQuery Mobile block the autoplay on mobile and on desktop. But I need the autoplay on destkop so I use “oncanplay” only that solution work. So on mobile the video isn’t starts playing automatically don’t worry I’m not a monster ! :slight_smile: