video-player.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. Twitch: {{post.video-twitch-channel}}
  22. {% if post.video-twitch-channel %}
  23. <!-- Add a placeholder for the Twitch embed -->
  24. <div id="twitch-embed"></div>
  25. <!-- Load the Twitch embed script -->
  26. <script src="https://embed.twitch.tv/embed/v1.js"></script>
  27. <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
  28. <script type="text/javascript">
  29. new Twitch.Embed("twitch-embed", {
  30. width: 640,
  31. height: 500, // 360 + 180 (chat) - 40
  32. channel: "{{ post.video-twitch-channel }}"
  33. });
  34. </script>
  35. {% else %}
  36. {% if page.video-yt-id %}
  37. <div>
  38. <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>
  39. </div>
  40. {% endif %}
  41. {% endif %}
  42. {% endif %}