# Onebox parser m3u8 link and play with videojs

**URL:** <https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426>\
**Category:** Development\
**Tags:** onebox\
**Created:** [February 23, 2024, 4:26am UTC](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426 "2024-02-23T04:26:20Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Creatures\_Prehistori](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/creatures_prehistori/32/329607_2.png) [@Creatures\_Prehistori](https://meta.discourse.org/u/Creatures_Prehistori)\
**Post date:** [February 23, 2024, 4:26am UTC](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426/1 "2024-02-23T04:26:20Z")

</div>

I edit file `lib\onebox\engine\video_onebox.rb` to parser link that endwith `m3u8`.

However, when I paste the m3u8 link from an external site, the video fails to parse correctly.

If I upload a file to the website, get an m3u8 link from this site, and then paste it into the reply box and refresh the page, the video plays perfectly. However, there are some styling issues with the onebox.

Here is the code I edited.

```plaintext
        if file_extension == '.m3u8'
          m3u8_html_tag(escaped_url)
        else
          # Set type attribute based on file extension
          type_attribute = case file_extension
                          when '.mov'
                            'video/quicktime'
                          when '.mp4'
                            'video/mp4'
                          when '.webm'
                            'video/webm'
                          when '.ogv'
                            'video/ogg'
                          else
                            ''
                          end
        source_tag = "<source src='#{escaped_url}'"
        source_tag += " type='#{type_attribute}'" unless type_attribute.empty?
        source_tag += '>'
        <<-HTML
          <div class="onebox video-onebox">
            <video class="video-js" controls #{@options[:disable_media_download_controls] ? 'controlslist="nodownload"' : ""}>
                #{source_tag}
              <a href='#{escaped_url}'>#{@url}</a>
            </video>
          </div>
          
          HTML
        end
      end

      def m3u8_html_tag(url)
        <<-HTML
          <div>
            <script src="https://hezheng-fmm.obs.cn-north-4.myhuaweicloud.com/jsdeliver/videojs/video.min.js"></script>
            <link href="https://hezheng-fmm.obs.cn-north-4.myhuaweicloud.com/jsdeliver/videojs/video-js.css" rel="stylesheet">
            <video class="video-js" controls>
              <source src='#{url}' type='application/x-mpegURL'>
            </video>
          </div>
        HTML
      end

```

Here’s a video of my process.

---

_[View the full topic](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426)._