Skip to content

Commit

Permalink
Improve readme
Browse files Browse the repository at this point in the history
I used mux for a recent project and I thought I could provide some more information in this readme.
closes sanity-io#10 by adding a warning about the `playsinline` attribute. If I understand correctly, this attribute is not exposed and must be added programmatically?
  • Loading branch information
mornir authored Nov 14, 2020
1 parent 46ad867 commit 15c55a7
Showing 1 changed file with 49 additions and 3 deletions.
52 changes: 49 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
# Sanity Mux Video Player

Play videos from MUX.com integrated with the Sanity plugin [`sanity-plugin-mux-input`](https://github.com/sanity-io/sanity-plugin-mux-input)
> Play videos from MUX.com integrated with the Sanity plugin [`sanity-plugin-mux-input`](https://github.com/sanity-io/sanity-plugin-mux-input)
# Using
## Install
```
yarn add sanity-mux-player
```

## Usage

### In a React application

- First you need to have a `mux.videoAsset` asset document in your hand. These documents are referenced to in the type `mux.video` that you will use inside your own types.

Expand All @@ -22,7 +29,46 @@ Play videos from MUX.com integrated with the Sanity plugin [`sanity-plugin-mux-i
width={number | percent}
/>
```
_Autoplaying videos: Videos must be muted to start playing automatically. In Safari, the additional `playsinline` attribute is [required](https://webkit.org/blog/6784/new-video-policies-for-ios/) and must be added [programmatically](https://github.com/sanity-io/sanity-mux-player/issues/2)._

# Codebox example
#### Codebox example

Run the test app on [Codesandbox](https://codesandbox.io/s/github/sanity-io/sanity-mux-player/tree/main/test-app)


### In the Rich Text Editor
You can embed the player in the Rich Text Editor. First add the `mux.video` type provided by `sanity-plugin-mux-input`, then import`sanity-mux-player` and use it as a preview component. For more information, you can follow the [video](https://www.youtube.com/watch?v=cy9fgZa8d90&) or [written](https://www.sanity.io/guides/how-to-embed-an-instagram-post-in-portable-text) tutorial from Sanity about embedding Instagram posts; the logic stays the same for embedding Mux videos.

```js
// schemas/documents/post.js
import React from 'react'
import SanityMuxPlayer from 'sanity-mux-player'

export default {
type: "document",
title: "Blog post",
name: "post",
fields: [
{
type: "string",
name: "title"
},
{
title: "Body",
name: "body",
type: "array",
of: [
{ type: "block" },
{
title: 'Video',
name: 'video',
type: 'mux.video',
preview: {
component: SanityMuxPlayer,
}
}]
}
]
}
```

0 comments on commit 15c55a7

Please sign in to comment.