video-player.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. {% if post.video-url %}
  2. <video id="video-player" width="640" height="360" class="video-js vjs-default-skin"
  3. controls poster="{{post.video-thumbnail-url}}" data-setyp='{"controls": "true", "loop": "false", "autoplay": "false", "preload": "false"}'>
  4. <source src="{{post.video-url}}" type="application/x-mpegURL">
  5. </source>
  6. <p class="vjs-no-js">The browser doesn't seem to support our video player... new browsers should.</p>
  7. </video>
  8. <script>
  9. var player = videojs('video-player');
  10. player.ready(function() {
  11. player.mediaSession();
  12. });
  13. //player.play();
  14. </script>
  15. {% if post.video-embed-path %}
  16. <button onclick="var el = $('#video-embed-code'); var newDisplay = (el.css('display') == 'none') ? 'block' : 'none'; el.css('display', newDisplay); console.log(newDisplay);">Embed Code</button>
  17. <textarea id="video-embed-code" style="display: none; width: 30em; height: 6em; font-family: monospace;"><iframe src="{{site-url}}/embed.html#{{ post.video-embed-path }}"></iframe>
  18. </textarea>
  19. {% endif %}
  20. {% else %}
  21. {% if post.video-twitch-channel %}
  22. <!-- Add a placeholder for the Twitch embed -->
  23. <div id="twitch-embed"></div>
  24. <!-- Load the Twitch embed script -->
  25. <script src="https://embed.twitch.tv/embed/v1.js"></script>
  26. <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
  27. <script type="text/javascript">
  28. new Twitch.Embed("twitch-embed", {
  29. width: 640,
  30. height: 500, // 360 + 180 (chat) - 40
  31. channel: "{{ post.video-twitch-channel }}"
  32. });
  33. </script>
  34. {% else %}
  35. {% if post.video-yt-id %}
  36. <div>
  37. <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{post.video-yt-id}}?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  38. </div>
  39. {% endif %}
  40. {% endif %}
  41. {% endif %}