• Home

  • Episodes

  • About

  • Login
    •
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage :
    how can I display the player without using StimulusJS, but just packs/application.js?
    0 0 0
    David Kimura PRO said about 3 years ago on Streaming Videos with Active Storage :
     ☒ instead of this.playerTarget you could use a DOM selector like document.getElementById
    0 0 0
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage :
    I hoped that having something like this in application.js 

    import videojs from 'video.js'
import 'video.js/dist/video-js.css'

$(document).on('turbolinks:load', function(){
  static targets = ['player']
  connect() {}
  initialize() {
    let videoPlayer = videojs(document.getElementById, {
      controls: true,
      playbackRates: [0.5, 1, 2],
      autoplay: false,
      fluid: true
    })
    videoPlayer.addClass('video-js')
    videoPlayer.addClass('vjs-big-play-centered')
  }
  disconnect() {}
});
    and this in the view.html.haml 
        = content_tag :div, data: { controller: 'video' } do
      = content_tag :video, data: { target: 'video.player' } do
        = tag :source, src: url_for(@episode.video),  type: @episode.video.content_type
    would work, however I can't make it work on the javascript side :(

    This one works however it does not seem to be the best solution:
        %video#my-video.video-js{:controls => "", "data-setup" => "{}", :height => "264", :poster => "MY_VIDEO_POSTER.jpg", :preload => "auto", fluid: "true"}
      = tag :source, src: url_for(@lesson.video), type: @lesson.video.content_type
      %p.vjs-no-js To view this video please enable JavaScript

    0 0 0
    David Kimura PRO said about 3 years ago on Streaming Videos with Active Storage :
    You wouldn't be able to use the connect(), initialize(), and disconnect() as those are functions for stimulus. Since your ID attribute of your video player is my-video then you would need to change the selector to document.getElementById('my-video') 

    So it should look something more like this.

    import videojs from 'video.js'
import 'video.js/dist/video-js.css'

$(document).on('turbolinks:load', function(){
  let videoPlayer = videojs(document.getElementById('my-video'), {
    controls: true,
    playbackRates: [0.5, 1, 2],
    autoplay: false,
    fluid: true
  })
  videoPlayer.addClass('video-js')
  videoPlayer.addClass('vjs-big-play-centered')
});
    1 0 0
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage : 
      let videoPlayer = videojs(document.getElementById('my-video), {
    gives a Parcing error: Unterminated string constant
    0 0 0
    David Kimura PRO said about 3 years ago on Streaming Videos with Active Storage :
    forgot the end quote on 'my-video'
    1 0 0
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage :
    Haha, The Javascript part works great! <3
    0 0 0
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage :
    And how the view code work with reguar javascript without the stimulust controller?

        = content_tag :div, data: { controller: 'video' } do
      = content_tag :video, data: { target: 'video.player' } do
        = tag :source, src: url_for(@episode.video),  type: @episode.video.content_type


    0 0 0
    David Kimura PRO said about 3 years ago on Streaming Videos with Active Storage :
    Since you're using id my-video for the selector, you'd need to set the id attribute.

    <%= content_tag :video, id: { 'my-video' } do %>

    Is there a reason why you're wanting to implement this without Stimulus?
    1 0 0
    elvira mamedova said about 3 years ago on Streaming Videos with Active Storage :
    Just one more question: how can someone disable the "save video" button like you did on this video? That's a really cool feature!
    0 0 0
    David Kimura PRO said about 3 years ago on Streaming Videos with Active Storage :
    Keep in mind that "disabling" the "save video" option is a false sense of security with your video.  I actually did not disable it on these videos, but rather I am using Adaptive Bitrate Streaming on all of the videos. So, depending on your internet connection, it will auto select a m3u8 file which would best match your bandwidth. This will stream smaller video files of various qualities. You essentially "lose" the capability of being able to download the video file  since it's now just a blob reference to the m3u8.  However, there is a lot more involved with transcoding videos with Adaptive Bitrate Streaming. You can check out this video on how I accomplished it.

    https://www.driftingruby.com/episodes/adaptive-bitrate-streaming-with-active-storage

    ☒
    1 0 0
    Alan SP said almost 2 years ago on Streaming Videos with Active Storage :
    After adding video_controller.js and updating the content_tags the video is no longer showing, and I'm getting this warning in the console.:

    guide.js:19 Please replace data-target="video.player" with data-video-target="player". The data-target attribute is deprecated and will be removed in a future version of Stimulus. video

     I'm not sure if the warning is why it's not showing, but I also can't figure out how to format the content_tag to change that attribute. Any advice? Cheers.
    0 0 0
    David Kimura PRO said almost 2 years ago on Streaming Videos with Active Storage :
     ☒ that is happening because you're using StimulusJS 2.x and the video was recorded when 1.x was the stable version.

    <%= content_tag :video, data: { target: 'video.player' } do %>

    could be changed to 

    <%= content_tag :video, 'data-video-target': 'player' } do %>

    or

    <%= content_tag :video, data: { video: { target: 'player' }} do %>
    0 0 0
    Alan SP said almost 2 years ago on Streaming Videos with Active Storage :
    Thanks, the second one worked with a minor typo fix (missing curly brace):

    <%= content_tag :video, { 'data-video-target': 'player' } do %>

    Unfortunately, I'm getting no video or console errors still.

    For what it's worth, I did get it to work with the plain js block from the videojs site:

    <video  id="my-video"  class="video-js vjs-big-play-centered item-video"  controls  preload="auto"  data-setup="{}">  
  <source src="<%= url_for(@item.attachment) %>" type="<%= @item.attachment.content_type %>" />  
  <p class="vjs-no-js">    
    To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>  
  </p>
</video>

    Let me know if there's anything else worth trying. Cheers.
    0 0 0
    Login to Comment