Purchase access to watch this video.

Unlock course for £159

Already purchased access? Login

Integrate Mux Player to play videos

  1. We'll now move on to playing videos in the browser.
  2. For optimal playback, Mux has created their own JavaScript-based video
  3. player called Mux Player,
  4. which works just like a HTML5 video tag. If we go to the Mux docs for Mux
  5. Player,
  6. we'll see that we can install it in an NPM package.
  7. Run "npm install" and save it as a devDependency.
  8. We can then import it into our app.js file.
  9. We now need to create a page to display the video details.
  10. Open up our front-end VideoController
  11. and return a new view videos.show, passing the video injected by route-model
  12. binding as a parameter.
  13. Create that view.
  14. Open the index.
  15. Set the title to the video name.
  16. And we're going to grab the card and replace the grids.
  17. Go back to our index view.
  18. And we can now set the href of our link tag
  19. to the video's "show" route for this particular video.
  20. If we now click on a video in the index listing, we're now taking to a page for
  21. that video,
  22. but the video doesn't play.
  23. All we're seeing is a video thumbnail.
  24. If we go back to the Mux docs, we can find this mux-player tag.
  25. We can copy it and replace our img tag.
  26. We can update the playback-id attribute value
  27. to our Video model's "mux_playback_id" attribute.
  28. And we can also change some of these metadata attributes.
  29. If we go to a video details page, we now see that we've got a video player,
  30. but the video won't play.
  31. This is because we're using signed playback IDs.
  32. So we need to provide a token for the playback.
  33. If we go back to the "Secure video playback" section of the Mux docs,
  34. to "Sign the JSON Web Token", and again to the PHP example,
  35. we'll see that another value for the audience is "v" for "video".
  36. So we can create a new method in our JwtFactory class for generating JWTs
  37. for playing videos.
  38. Open the JwtFactory class,
  39. copy the "thumbnail" method, and rename it "playback".
  40. Update "t" for "video",
  41. and set the expiry to the video's duration plus 30 minutes for latency.
  42. It's important to call getTimestamp to set the expiry as any Unix timestamp
  43. integer,
  44. rather than a Carbon instance, otherwise the JSON web token won't be invalid.
  45. If we go back to the Mux Player docs and under "Advanced usage",
  46. we'll see there's a section for "Using with signed URLs".
  47. Where we want to use Mux Player with signed URLs,
  48. we need to specify additional attributes, including playback-token.
  49. So let's do that.
  50. For the playback-token, we'll use our JwtFactory.
  51. So we can use our JWT facade, the "playback" method we've just defined,
  52. and we can pass the video instance.
  53. We can also do the same for thumbnail-token,
  54. specify thumbnail-token attribute, and use the "thumbnail" method on that facade.
  55. If we refresh in the browser, we should see that the player's background is set
  56. to the video's
  57. thumbnail, and that we can now play the video.
  58. If we come back to the video after some time, and try and view the video,
  59. playback will fail because the token's expired.
  60. This will prevent people from sharing URLs and being able to watch videos far
  61. in the future.
  62. Well next up, we'll have playback restrictions, so that videos can only be
  63. played on your own
  64. domain and not on any other website, even if the expiry value is still in the
  65. future.


Connect GitHub