Novice video.js JS and phoenix template question -- access lazily evaluated object

Phoenix Forum Questions / Help
, ,
1

So I have video.js player working OK in a phoenix 1.5.x view. I added "videojs-seek-buttons": "^1.6.0" to package.json and I’d like to run some raw JS to add some seek buttons to the player in the DOM. I just can’t seem to find the running videojs player to add the seek buttons to. I’m not sure if I’m off-base with my script import locations or it’s a lack of understand of JS?

app.html.eex:

...
    <link href="http://vjs.zencdn.net/7.11.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/7.11.0/video.js"></script>
  </head>

show.html.eex:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.css">
<script src="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.min.js"></script>

<video id="my_video" class="video-js" controls preload="none" width="640" height="264" data-setup='{ "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }'>
  <source src="<%= Routes.watch_path(@conn, :show, @video) %>" type='<%= @video.content_type %>'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

<script>
console.log("my_video")
players = window.videojs.getAllPlayers
console.log("players")
console.log(players)
var player = players[0]
console.log("player[0]")
console.log(player)

  player.seekButtons({
    forward: 15,
    back: 15});
</script>

my_video
ƒ () { return (// Disposed players leave a key with a null value, so we need to make sure // we filter those out.
player[0]
undefined
Uncaught TypeError: Cannot read property 'seekButtons' of undefined ...

1 Like
2

Try window.videojs.getAllPlayers(). It’s a function and by not adding () you don’t execute it and store the results, but you’re referencing the function itself.

1 Like
3

Thanks, that helped. I think I’m almost there. Another novice JS question though, what is the syntax to get that my_video object? my_video = window.videojs.players.my_video returns undefined?

console.log("videojs.getPlayer()")
console.log(window.videojs.getPlayer())
console.log("window.videojs.players")
console.log(window.videojs.players)
my_video = window.videojs.players.my_video
console.log("my_video")
console.log(my_video)

result:

Screen Shot 2021-01-12 at 12.46.46 PM
Screen Shot 2021-01-12 at 12.46.46 PM1134×392 32.4 KB

4

How did you configure your path to be able to watch the videos? On my player that I am making I am only able to upload the videos but when creating the path watch_path I have been thrown nothing but errors.

5

checkout this branch: https://github.com/mazz/phoenix_video_stream/tree/phx-15x

Please tell me if you get anywhere with adding some seek buttons!