Linear

Losing access to DOM after initizing player? Errrm WHY? (Projekktor Core)

by lowlight, Thursday, April 05, 2012, 09:12 (414 days ago)

I dont know how to explain this problem other than by example. When you click on "File 1" OR File 2, it always works on the first click. But if you click the other link at any point, whether the video is playing, paused, or stopped, it simply will not run because it's getting an error from the DOM.

I am trying to do a very simple HREF based playlist. Something this simple seems like it would just work, but it does not.

Please do not tell me how to use the playlist. I am not interested in using that for this particular issue. I simply want to know why I cannot access the DOM. If it's renamed or whatever, I need to know what it's renamed to, or if it's accessed differently, I need to know that too.

This is NOT the actual install I will be using. This is only to demonstrate the DOM issue I'm having with a player that DOES have a playlist. This is the simplest example I could write that demonstrates the problem at hand. If someone could take this code and make it work, that would be awesome. I could then take the methods and apply it to my other install.

The error I get is:
Uncaught TypeError: Cannot read property 'src' of null

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="projekktor.min.js"></script> <!-- load projekktor -->

<a href=# onClick='write_filepath("bbb_trailer_mobile.m4v");'>File 1</a>
<a href=# onClick="write_filepath('sintel-trailer.m4v');">File 2</a>

<video id=player_a class="projekktor" poster="" title="This is Projekktor" width="640" height="385" controls id="player_a">
<source id=dummy src="#DummyEntry" />
</video>

<script>
function write_filepath(filepath)
{
   alert(filepath);
   alert(document.getElementById('dummy').src);
   document.getElementById('dummy').src=filepath;
   alert(document.getElementById('dummy').src);
   projekktor('#player_a', {});
   return;
}
</script>
  445 views
Avatar

Losing access to DOM after initizing player? Errrm WHY?

by sascha ⌂ @, Saturday, April 07, 2012, 21:05 (411 days ago) @ lowlight

Hi Lowlight,

Please do not tell me how to use the playlist.

You do not need to use playlist but you can use "setItem".

I simply want to know why I cannot access the DOM. If it's renamed or whatever, I need to know what it's renamed to, or if it's accessed differently, I need to know that too.

The whole DOM is being changed after instantiation. Even if you´re using a <video>-tag since its just being looted by Projekktor and buried afterwards.

The benefit of using "setItem" instead of "manually" set a new URL is that you do not loose the transparent flashfallback and other nice stuff. Manipulating the <video> element built by Projekktor (if any) during runtime might cause very strange effects.

The ID however is the the original DOM ID plus "_media_video" - use on your own risk.

- Sascha

---
Help keeping free Projekktor support alive. Consider to buy supporter license: http://shop.projekktorxl.com/shop/supporter-license/

  421 views

Losing access to DOM after initizing player? Errrm WHY?

by lowlight, Saturday, April 07, 2012, 23:53 (411 days ago) @ sascha

Hmmm, well I tried this suggestion and it still wouldnt work properly. So I again looked over the API for anything that would reset the DOM and I ran across this:


player.selfDestruct();
Instantly destroys the referred instance and reconstructs its host DOM´s original state; the one before the player has been applied.


I guess my original post was not clear enough. The problem was the DOM, I just couldnt figure out how to explain it any clearer. The way to reset this is to reset the player which then reloads the DOM. Then you can safely manipulate the DOM. I placed the selfDestruct in the "Completed" state for my own application and it loads the next player item just fine, no matter what modifies the hidden value. The playlist I built is modified and monitored from a different screen than the player. I have ajax that modifies hidden vars with the current item to put in the playlist (which is only 1 video at a time currently, I didnt want multiple items in the play list).

This works because right before the video is "Completed", I modify the DOM using outside JS. Thus, when it "destroys and reloads" it gets the new values. This is what I wanted and didnt know how to explain it.

  466 views