To achieve this, we decided to use Bitmovin’s latest solution, Streams, with NextJS 13 and Tailwind CSS. Being a junior developer on the Streams team and Mihael being the product manager, this was also a good way to see its capabilities firsthand and experience what many platforms have already experienced when implementing it in a real streaming environment. When we launched Streams, we built it to give teams a feature-rich end-to-end solution they could quickly deploy or integrate into their existing streaming workflow. We also set our objective to make it a robust solution anyone could use, no matter their level of experience, to get up, launch, and stream quickly.

In this blog post, we will provide an overview of the tools we used and share our experience implementing the various products in combination to develop this YouTube-like app in less than a day.

Overview of the Tools and How They Were Used

Streams

As we mentioned before, Streams is the latest offering that Bitmovin has brought to market. It’s a powerful out-of-the-box live and on-demand video streaming solution that provides an end-to-end workflow and integrates Bitmovin’s industry-leading Live and VOD Encoding, Video Player, and Analytics. With Streams, platforms are able to host, manage, and stream high-quality video anywhere in the world with a unified and seamless workflow. With regards to the specific features, to make content available, simply upload your video library or connect your live source to start encoding. Our proprietary Per-Title encoding will make your content available in the highest quality with lower bitrates so viewers can have the best streaming experience in low bandwidth environments. 

Per-Title encoding will also help you save tremendously on storage and delivery costs due to the lower bitrates. For video playback, Streams enables you to brand the Bitmovin Player to your company and customize the Player skin, giving your users a unique and personalized viewing experience. Additionally, with support for client-side ad insertion, you can monetize content with VAST, VMAP, and VPAID ads that can be added in pre-roll, mid-roll, and post-roll. Then, to monitor and track each view session, Streams provides in-depth metrics with its direct integration with Bitmovin’s Analytics, giving you the ability to analyze the user experience and content quality and performance. Lastly, Streams is integrated with multiple global CDN providers, ensuring your content has a global reach and can be viewed in the highest quality anywhere in the world.

Tailwind CSS

We chose Tailwind CSS for this project because it offers a highly efficient and intuitive approach to styling web interfaces. With its extensive collection of utility classes, you can easily create beautiful, responsive designs without the need to write custom CSS code. Tailwind CSS allows you to save time and effort by providing pre-defined classes that can be combined to achieve desired design outcomes. Its focus on responsiveness and customization options ensures that you can easily create interfaces that perfectly fit your needs. By leveraging Tailwind CSS, we can streamline the front-end development process and deliver visually impressive user interfaces in a more efficient manner.

Next.js

Next.js is the perfect choice for you if you want to build fast and scalable web applications. It is a popular open-source framework for building server-side rendered (SSR) React applications. It simplifies development and ensures optimal performance by providing a powerful set of features such as automatic code splitting, server-side rendering, and dynamic imports. Additionally, its seamless integration with popular tools and supportive community make it an ideal framework for creating robust and efficient applications.

How I Built the YouTube-Like Platform

Now, let’s move on to how we used these tools to create our YouTube-like platform.

Our first step was to create a basic Next.js application with a homepage that could display a list of videos. We used the Bitmovin Streams API to fetch the list from our Bitmovin account and display them on the homepage using React components. 

Once done, we added a video player component that allows users to view individual videos. We used the Bitmovin Player for this piece to stream the videos and were able to use its out-of-the-box Player controls, such as play, pause, volume control, speed choice, audio track selection, and video quality. We could have also implemented styling options for the Player for branding purposes, but we wanted to focus solely on the core capabilities of the platform. Next, we embedded the Player into the app, which was very easy as we only had to import the JS library and utilize the web component. Alternatively, we could have used the iFrame option to embed the video, but this would have made it harder to customize the experience in the future.

After that, we added a video upload page, allowing users to upload their own videos to our platform. We used the Bitmovin Upload API for this so users could create a new video asset, upload the video file, and encode it into multiple formats for playback on different devices. We also added a basic form that allows users to enter metadata such as the video title and description.

Finally, to style our application, we used Tailwind CSS. We used the pre-defined Tailwind classes in our React components to style our user interface.

Our Thoughts Looking Back

Creating a video streaming platform is a complex task, but with the right tools and frameworks, it can be achieved efficiently and effectively. By using Bitmovin Streams, Next.js, and Tailwind CSS, we were easily able to create a YouTube-like platform that was powerful, fast, and user-friendly. The combination of these powerful tools allowed me to handle complex tasks with ease, such as video encoding, playback, and streaming, while also allowing for rapid UI development and responsive design. 

Along with the front and backend implementation, we were also able to gather clear insights into the user experience and quality and performance of the content streamed through the integration with Bitmovin’s Analytics. With this integration, we are able to leverage in-depth audience data on overall views, unique users, browser sessions, regions where the video has been viewed, and much more. 

As a follow-up to this project for our next hackathon, we are also thinking of extending our Youtube-like platform to showcase how live streaming can be implemented, as Bitmovin’s Streams also supports this capability. Below find the link to a short video of the results from this project and our GitHub repository, which can be used by others as inspiration or a foundation to get started with the above-mentioned technologies.

Video:

Github Repo: https://github.com/bitmovin/streams-examples 

If you’d like to test out Streams, Sign up for our free 30-day trial today and gain access to all of our solutions.

The post How We Built a Website Like YouTube Using Bitmovin’s Streams appeared first on Bitmovin.

The Bitmovin Streams Plugin allows WordPress users to quickly install adaptive video content into their WordPress website with all of the features of our Streams solution

Embedding and streaming video over WordPress has just gotten easier! We’re excited to announce our  dedicated WordPress plugin for our Bitmovin Streams solution. This allows companies looking to launch their video platform or currently have video on their WordPress-built sites can streamline their video workflow and get streaming immediately.

What benefits come with using Streams?

Along with the latest WordPress plugin, the Bitmovin Streams solution provides additional benefits across the entire streaming workflow. It gives teams access to one simple end-to-end solution that includes all our industry-leading streaming services, making it easy for you to get going fast. With Streams, you’ll be able to:

• Ensure your content streams in the highest quality possible and is adaptive to your viewer’s internet. We automatically analyze your content, transcode it in the best possible quality, and provide multiple resolution options. This way, your users can view your content based on their internet connection and don’t have to wait for a better connection for the video to load.
• Customize and style the Bitmovin Player to your brand, giving users a consistent and quality experience when watching content on your platform. This helps keep people on your platform without external links to service providers such as YouTube.
• View real-time Analytics. Our Streams insights feature provides you with in-depth, real-time analytics data about your user’s behavior, the quality of the stream, and much more. Learn how many have watched your video, the drop-off rate, the average viewing time, and the location where viewers are watching from. 
• Enable content protection and monetization through pre-integrated workflow features. Once more users view your content, monetization, and content security become key. We are currently implementing ad support so you can monetize your content and protect it with DRM.

Streams WordPress plugin is focused on enabling new and existing platforms to get to market fast with their easy-to-use Dashboard UI and API’s to host, encode, embed and stream video content easily

How it works

We’ve made implementing Streams simple to empower anyone of any background to upload a video file or connect their live input, host, embed, and stream to audiences worldwide in the highest quality.

To get started, you’re going to need the following:

• A WordPress account and webpage
• A Bitmovin account (check out our 30-day free trial, which after the trial can be set to pay-as-you-go and includes free Player and Analytics impressions and VOD and Live Encoding minutes)

After you’ve got that done, you can add Bitmovin’s Streams solution to your WordPress website quickly by following these steps:

• First, go to your WordPress backend’s Plugin section and click Add New.

• Next, search for Bitmovin Streams, where you can apply it from the WordPress marketplace.

• After downloading, click Activate on the downloaded plugin.

• Then you’ll need to add your Streams API key, which you can find by logging into the Bitmovin dashboard and going to account settings.
  • Copy the API key, paste it into the Bitmovin Streams plugin, and save the changes.

• Create a new page on your WordPress backend and select the Bitmovin plugin when opening the editing options.

• Upload your content by dragging or uploading the file directly into the upload section and the video will be automatically loaded and start being prepared for usage

• After the file has finished preparation, it will show on your page, and you can save or publish your changes and enjoy the result!

You will see the video available in the video player, and it will be available in every rendition set once the file has completed encoding. After you’ve embedded your content and made it available for your audience, return to the Bitmovin Dashboard to view your stream analytics. You can find more details in our documentation and a frequently asked questions section that may help you answer any questions about Streams.

Accessing Bitmovin’s video streaming solutions

Signing up for a Bitmovin account is completely free and enrolls you in our 30-day trial. You’ll have access to our industry-leading products, including Streams, enabling you to test and utilize our solutions without any upfront cost. After the 30-day trial, you can transition to our pay-as-you-go (PAYG) plans, which are month-to-month and solely based on usage, giving you access to over 10,000 free player impressions and 2,000 free encoding minutes monthly. 

Check our latest WordPress plugin out today and get streaming!

The post How to Launch and Stream Video on WordPress Easily appeared first on Bitmovin.

Simplifying video streaming for an easier workflow experience

We built Bitmovin’s Streams solution to make streaming simple for everyone, regardless of their level of video development or streaming knowledge. Driven by seeing how complex live and on-demand video workflows can be, we’ve taken the best parts of our industry-leading standalone solutions for Live and Video Encoding, Player, and Analytics and combined them to make Streams. This enables you to get to market faster and stream in the highest quality to your users globally while gathering important and actionable audience data to ensure the best viewing experience.

Which industries and workflows is Bitmovin’s Streams perfect for?

Streams truly fits into every use case, as its core focus is to cut down the process to get streaming as easily as possible. Facilitating both video on demand (VOD) and live workflows, as mentioned above, Streams can be used within every industry, such as:

• ELearning
• ECommerce
• Esports
• Online fitness and health
• OTT
• Publishing (news, etc.)
• Live events (sports, conferences, etc.)
• Religion and faith
• + more

Diagram of the Bitmovin Streams workflow

VOD workflows

For VOD workflows, Streams enables you to directly upload and host content on the Bitmovin dashboard, where it is then automatically encoded and has an embed code associated with it to be applied where you wish to stream from. This empowers any team to offer their viewers access to their entire video library, as you now have the tools to make content available easily. Additionally, when content is run through the Bitmovin Encoder, meaning it is being prepared in multiple formats to make viewing on different devices and platforms possible, we utilize our Per-Title Encoding capabilities. This allows you to upload video with no need to set any parameters, as our best-of-breed VOD Encoder identifies and applies all of the benefits to your content automatically, saving you on cloud storage and CDN delivery costs and making video content available in the highest quality while cutting the bitrate needed to stream it. Apart from saving money with our Per-Title algorithm, you can also monetize your content through client-side ads that can be set up on the Bitmovin dashboard.

Live workflows

Specifically for live streaming workflows, you have the ability to use any live production software (OBS, vMIX, etc) or hardware (Videon, Haivision, etc.) on your end to connect your live stream to us. All you have to do is start up your live production tools, create a live stream on the Bitmovin Dashboard and apply the RTMP link and stream key to your system of choice. From then on, all you need to do is take the player embed code from the Bitmovin dashboard and apply it to your platform to make the stream available for your viewers on every device in HLS and DASH. Another benefit for live streaming scenarios, development teams can now save precious time by being able to connect and stream quickly with the same Streams setup that they used for a prior event, meaning they don’t have to change the stream ID or stream key when they need to stream additional events that are not concurrent.

Personalize the Bitmovin Player to your brand

As mentioned above, the Streams solution gives you complete access to the Bitmovin Player and enables you to customize it in multiple ways, providing your users with a unique branded experience. Add your brand logo (watermark) in the styling and stream settings bar to automatically integrate it into the player interface, giving additional exposure and brand visibility to visitors watching your live and on-demand video. Adding unique thumbnails and preview graphics to your content is another option to make the player feel more like your own and give viewers an understanding of what the video is about. To further ensure that the player’s visual identity is consistent with your brand, you can apply unique CSS styles to its features, including controllers, progress bars, buttons, and overlays, as you can see in the image below. Additionally, Streams will be adding more features to the Player functionality to give you more control over the individual player controls, auto start, and other features.

Player customization features with Streams

Monetize your content with ads

One of the latest features released was the ability to monetize content with client-side ad support. Ads have become a major part of how platforms are able to make money while streaming, especially ones with advertising video-on-demand (AVOD) focused business models. Client-side advertising can be easily configured within Bitmovin’s Streams for live and on-demand video and does not require advanced technical knowledge. Seamlessly set up your ads by selecting the ad format:

•  VAST
• VMAP 
• VPAID

Then select the time interval when the ad should play:

• Pre-roll
• Mid-roll
• Post-roll

Finally, insert your ad tag URL and save the configuration. This 3 step process enables you to set up as many ads as you’d like to have in your content and is handled automatically by Bitmovin Streams, guaranteeing a smooth viewing experience for users and maximizing revenue.

Monitoring Viewer Sessions with Real-time Analytics

Streams also provides robust real-time Analytics, allowing you to gather in-depth, actionable data on every play. You and your development team can capture important metrics and events happening throughout each viewer session, such as play attempts, unique users, concurrent users, plays per country, plays per device, and much more. Through additional data points, you can gain vital insights into their quality of experience (QoE) when streaming content by viewing information around seek events, time of video start, length of video, bitrate, buffering, and more. All of this information helps give you and your team the complete picture, providing valuable insights into how viewers are interacting with the content and helping you identify areas for improvement and optimization.

Helping you to get up and running regardless of your level of experience

Are you concerned with how much video-specific developer knowledge may be needed? As in the previous image, the three steps and low code needs keep it simple and let you get going with our streamlined process that provides the best experience out of the box without you having to be an expert.

Wrapping up

Want to know more about Streams? Check out Streams on our website and in our Developer Community post, and if you have specific questions regarding Streams capabilities or limitations, check out our growing FAQ!

If you want to simplify your existing streaming workflow or launch your video streaming platform, sign up for a free trial to start testing Bitmovin’s Streams today.

The post Introducing Bitmovin’s Streams appeared first on Bitmovin.