Uploading and inserting a video into the Portable Text editor

[sebpowell]

I'd like to add video upload functionality to Sanity studio that allows me to embed a video into the Portable Text editor in the same way images can be added.

As far as I can see, Sanity itself does not support video upload (unless I'm missing something) – instead, it needs to be handled through, for example, Mux (https://www.sanity.io/plugins/sanity-plugin-mux-input).

I'm just wondering if this is the best / right way to go about implementing this feature? Any guidance would be greatly appreciated. Thank you i advance.

[rammohanpatel]

Video Upload & View(Frontend) Functionality to Sanity Studio with Mux Integration In Portable Text

If you're looking to enhance your Sanity Studio by enabling video upload functionality and seamlessly embedding videos into your Portable Text editor, you're on the right track. Sanity doesn't inherently support video uploads out of the box, but integrating with Mux can fill that gap effectively.

Schema for adding video in portable text
`const post = {
title: 'Post',
name: 'post',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
validation: Rule => Rule.required(), // Mark title as required
},
{
name: 'body',
title: 'Body',
type: 'array',
of: [
{
type: 'block',
},
{
type: 'image',
},
{
type: 'file',
},
{
type: 'mux.video',
}
],
validation: Rule => Rule.required(), // Mark body as required
},
};

export default post;

`
Fetching post on frontend using sanity client & displaying the video on frontend

`import MuxPlayer from '@mux/mux-player-react';
import {client} from 'path-to-client-file'
import {useState} from 'react'

const [blog, setBlog] = useState(null);
const fetchBlog = async () => {
const query = *[_type == 'post' && slug.current == $slug][0] { title, body[]{ ..., _type == 'mux.video' => { "playbackId": asset->playbackId } }, };
const data = await client.fetch(query);
setBlog(data);
};`

  const MuxVideoComponent = ({ value }) => {
    if (!value.playbackId) {
      return <p>No video available</p>;
    }
  
    return (
      <MuxPlayer
        autoPlay
        loop
        muted
        playbackId={value.playbackId}
        metadata={{ video_title: value.title || 'Video' }}
        controls
        style={{ width: '100%', height: 'auto' }}
      />
    );
  };
  
  
  const myPortableTextComponents = {
    types: {
       'mux.video': MuxVideoComponent,
    },  
  };
         
  <PortableText value={blog.body} components={myPortableTextComponents} />

`
By following the steps outlined above, you can enhance your content management workflow with the ability to manage videos alongside other media assets. If you have any questions or need further assistance, feel free to reach out to the Mux and Sanity communities for support.

Happy video uploading! 🎥🚀

[muze-cincopa]

Great question! You're correct that by default, Sanity doesn’t offer native support for video uploads in the same way it does for images, but you're on the right track with using services like Cincopa to handle video content.

One thing to keep in mind is that video files can be quite large, so it's essential to ensure that your setup can manage that kind of data efficiently. Cincopa is an excellent option for streaming and transcoding, and the plugin you're referring to helps integrate it directly into Sanity Studio. This can provide a smooth experience, especially when it comes to embedding and managing videos.

Alternatively, services like Cincopa can also be a good fit for video hosting and embedding, allowing you to upload videos and then embed them in the same way you'd do with an image in Sanity’s Portable Text editor. Cincopa offers not just video hosting, but also customizable players and good integrations with various platforms. You can manage, organize, and display your videos without having to worry too much about hosting them yourself.

In terms of implementation, it would involve a similar approach as using Cincopa—by either creating a custom field type for your video input or leveraging an existing plugin that integrates video hosting platforms. Once the video is uploaded and processed, it can be embedded just like any other media type in the Portable Text editor.

Hope that helps, and good luck with your implementation!