Embedding and Managing Video Editing Tutorials in OJS for My Website

[joeroot]

Hi everyone,

I’m using Open Journal Systems (OJS) for my website to publish resources and articles about video editing. I want to enhance the user experience by embedding video tutorials alongside the articles, but I’m encountering a few issues:

1. Video Embedding Challenges:
   I’ve tried embedding YouTube videos and self-hosted MP4 files in the article content using the HTML editor. While it works, the videos don’t scale properly on mobile devices. Is there a recommended way to make embedded videos fully responsive in OJS?
2. Video Hosting vs. Storage Limits:
   Hosting video files directly in OJS seems to increase the storage usage significantly, which I worry might slow down the system. Would it be better to host the videos externally (e.g., on Vimeo or AWS) and embed them? If so, what’s the best way to ensure seamless playback for users?
3. Interactive Multimedia Integration:
   I’d like to include interactive video elements (e.g., annotations or quizzes) within the tutorials. Does OJS support plugins or tools for integrating multimedia content, or would I need to link to external platforms for this functionality?
4. Custom Styling:
   The default OJS theme doesn’t seem to offer much flexibility for styling video elements. I’d like to add a custom play button overlay and improve the appearance of the video player. Can this be achieved with custom CSS or by modifying the theme files?

Has anyone else worked on integrating video content in OJS, particularly for tutorial-heavy websites? Any tips or examples of how to address these challenges would be greatly appreciated!

Thanks in advance for your help!

[rcgillis]

Hi @joeroot,

Thanks for your post. That’s a really neat use case for OJS.

As a starting point, I highly recommend checking out this short talk by our lead developer: https://youtu.be/qv2GLxVTXjQ?si=QdHqkJCjviJwwUJA

There is some specific advice around considering sustainability, particularly as it relates to embedded multimodal content. We are also currently working on a guide on multimodal publishing that I hope will be published in the new year.

To speak to your specific concerns:

1. Video Embedding Challenges:

What version of OJS are you using (e.g. 3.3.0-8), and which theme are you using (as well as the version of the theme)? You may want to try different themes, as they may provide more optimal mobile experiences. In the talk that I linked to above there is good discussion about some of the advantages and pitfalls of video embedding and considerations that ought to be taken into account.

2. Video Hosting vs. Storage Limits:

I’ve heard of people running up against this.

@joeroot

Would it be better to host the videos externally (e.g., on Vimeo or AWS) and embed them? If so, what’s the best way to ensure seamless playback for users?

There may be ways to optimize your OJS to run these better, but I suspect that having an external tool do the heavy lifting for video streaming would be more optimal.

There are a number of nice FLOSS tools for video streaming, that may be able to be used as an alternative to commercial streaming services:
https://owncast.online/
https://joinpeertube.org/
https://gitlab.com/osp-group/flask-nginx-rtmp-manager
https://github.com/Red5/red5-server https://github.com/gwuhaolin/livego …
This last one might be good candidate for an OJS plugin where data is stored in OJS and delivered by Restreamer: https://datarhei.com/, but no plugin currently exists (hat tip to @marc - who pointed these options out to me).

3. Interactive Multimedia Integration

One possible option that comes to mind is h5p (https://h5p.com/). It’s been used a lot for Open Educational Resources and from what I’ve seen, it can be embedded in different ways. I haven’t specifically seen it used in OJS, though, so I can’t vouch entirely for it. But it does sound like something that you would be looking for. When it comes to embedding various things within OJS galleys, again, the video that I mentioned above talks about some key considerations to bear in mind.

4. Custom Styling:

I suspect that this would involve some custom theming as well as CSS, although I don’t have direct experience with this. You may want to check out our theming guide here: https://docs.pkp.sfu.ca/pkp-theming-guide/ - to get a better sense of what is involved.

Very interesting use case, perhaps when you’ve made some progress on your work, you could share your journal’s work in the “Community Showcase” category here on the forum? Hopefully others in the community with experience in doing similar work in OJS or other PKP software will be able to weigh in.

-Roger
PKP Team

[mpbraendle]

See this old post: Example of OJS 3 site with embedded video on article page

[joeroot]

Thank you so much for the detailed response and for sharing the resources! I appreciate the guidance and the links you’ve provided—they’re incredibly helpful.

Regarding Video Embedding Challenges:

I’m currently using OJS 3.3.0-8 with the Default Manuscript theme. I’ll explore other themes to see if they offer better responsiveness for video content. The talk you linked sounds like a great resource for understanding the technical and sustainability aspects of embedding videos, and I’ll make sure to watch it.

I agree that offloading video streaming to external tools makes more sense for performance. I hadn’t considered FLOSS tools like Owncast or PeerTube before; they seem like excellent alternatives to commercial services. I’ll investigate these further and evaluate how they can fit into my workflow. A plugin for Restreamer sounds like a fantastic idea—it’s a shame one doesn’t exist yet!

Interactive Multimedia Integration:

H5P seems like exactly what I need for adding interactive elements to my tutorials! I’ve used it in other contexts, so I’m somewhat familiar with its capabilities. I’ll experiment with embedding H5P content in OJS and see how it works in practice. If it’s successful, I’d be happy to share my findings with the community.

Custom Styling:

Thanks for pointing me to the theming guide! I’ll dive into it and see how much I can customize the video player with CSS and theming changes. A custom play button overlay and styling the player to match the journal’s branding are high on my priority list.

Community Showcase:

I’d love to share my journal once I’ve implemented these improvements and refined the user experience. Hopefully, it can serve as a useful example for others working on similar projects.

Again, thanks for taking the time to provide such a thorough response. If anyone else in the community has experience with these specific use cases or tools, I’d love to hear about it!