Skip to content

Basic support for audio/video content#372

Merged
jimlambie merged 5 commits intodevelopfrom
feature/basic-video-support
Jun 6, 2018
Merged

Basic support for audio/video content#372
jimlambie merged 5 commits intodevelopfrom
feature/basic-video-support

Conversation

@jimlambie
Copy link
Copy Markdown
Contributor

@jimlambie jimlambie commented Jun 4, 2018 •
edited
Loading

This PR adds basic support for "seekable" content such as audio and video.

The following snippets serve as a guide for testing video in operation. Video and audio files are served from the configured "assets" location. Configure your CDN instance using the below settings:

Configure CDN

config/config.development.json

"images": {
  "directory": {
    "enabled": true,
    "path": "./images"
  },
  "s3": {
    "enabled": false
  },
  "remote": {
    "enabled": false
  }
},
"assets": {
  "directory": {
    "enabled": true,
    "path": "./assets"
  },
  "s3": {
    "enabled": false
  },
  "remote": {
    "enabled": false
  }
}

Add files to be served

Add an image called "poster.jpg" to the "images" directory, and a video called "video.mp4" to the "assets" directory:

your-cdn-installation/
├── config
│   └── config.development.json
├── images
│   └── poster.jpg
├── assets
│   └── video.mp4
└── index.js

Create the HTML page to serve video content

The following example uses video.js to load and play the video content. The example assumes your CDN is running on http://localhost:3000, so make adjustments to the HTML where necessary:

index.html

<head>
  <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="http://localhost:3000/poster.jpg" data-setup="{}">
    <source src="http://localhost:3000/video.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
</body>

Close #371 , #338

eduardoboucas
eduardoboucas approved these changes Jun 4, 2018
View reviewed changes
Copy link
Copy Markdown
Contributor

@eduardoboucas eduardoboucas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@jimlambie jimlambie merged commit 0f9af43 into develop Jun 6, 2018
@jimlambie jimlambie deleted the feature/basic-video-support branch June 6, 2018 03:15
@jimlambie jimlambie mentioned this pull request Jun 19, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@abovedave abovedave Awaiting requested review from abovedave

1 more reviewer

@eduardoboucas eduardoboucas eduardoboucas approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

product: CDN status: needs docs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jimlambie @eduardoboucas