videojs / http-streaming

HLS, DASH, and future HTTP streaming protocols library for video.js
https://videojs-http-streaming.netlify.app/
Other
2.45k stars 416 forks source link

Moving everything over to http-streaming #332

Open samueleastdev opened 5 years ago

samueleastdev commented 5 years ago

Description

Hi ;) i am trying to move my existing setup over to this individual setup http-streaming for DASH and HLS.

My previous setup using npm was as follows in my package.json

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-concat": "*",
    "grunt-contrib-connect": "^2.0.0",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-jshint": "^2.0.0",
    "grunt-contrib-qunit": "^3.1.0",
    "grunt-contrib-uglify": "^4.0.0",
    "grunt-contrib-watch": "^1.1.0"
  },
  "dependencies": {
    "video.js": "^7.4.1",
    "videojs-contrib-dash": "^2.10.1",
    "videojs-contrib-eme": "^3.4.1",
    "videojs-contrib-hls": "^5.15.0"
  },
  "description": "...",
  "main": "gruntfile.js",
  "scripts": {
    "start": "grunt"
  },
  "author": "",
  "license": "ISC"
}

So assume i could update this with this below.

{
  "name": "test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-contrib-concat": "*",
    "grunt-contrib-connect": "^2.0.0",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-jshint": "^2.0.0",
    "grunt-contrib-qunit": "^3.1.0",
    "grunt-contrib-uglify": "^4.0.0",
    "grunt-contrib-watch": "^1.1.0"
  },
  "dependencies": {
    "video.js": "^7.4.1",
    "@videojs/http-streaming": "^1.7.0",
    "videojs-contrib-eme": "^3.4.1"
  },
  "description": "...",
  "main": "gruntfile.js",
  "scripts": {
    "start": "grunt"
  },
  "author": "",
  "license": "ISC"
}

Everything seems to work for HLS but all my DASH players dont work unless I include.

"videojs-contrib-dash": "^2.10.1",

Am I missing something should http-streaming include everything? or do I still need to include dash?

Extra info my grunt config looks like this.

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {},
      dist1: {
        src: [
          'node_modules/video.js/dist/ie8/videojs-ie8.js',
          'node_modules/video.js/dist/video.js',
          'node_modules/@videojs/http-streaming/dist/videojs-http-streaming.js',
          'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js',
        ],
        dest: 'dist/<%= pkg.name %>.js'
      },

Here is an example not working in Chrome: https://jsbin.com/jazuhup/1/edit?html,output

Any help thanks

welcome[bot] commented 5 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

forbesjo commented 5 years ago

http-streaming is actually built into video.js 7 by default now so all you should have to do is:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://dwpurpmwfzvap.cloudfront.net/tyrel-clip-1-h1080p/master.mpd" type="application/dash+xml">
  </video-js>

  <script src="https://unpkg.com/video.js/dist/video.js"></script>

  <script>
    var player = videojs('my_video_1');
  </script>

</body>
</html>

However it looks like there is a bug in http-streaming and it is not handling your source correctly. It looks like it works in Shaka Player

samueleastdev commented 5 years ago

Hi @forbesjo

Thanks for the feedback about how to include the new videojs setup I will leave my link up and wait for a fix regarding the DASH file.

samueleastdev commented 5 years ago

Probably worth noting that the video was a mov file encoded to DASH with AWS Mediaconvert using the DASH system preset.

majamee commented 5 years ago

I guess, I've got the same problem: issue, source code and demo can be found here: https://alpine-dash-hls.gq/demos/videojs/videojs-vhs-v7

Please let me know what to do to fix the situation.