Black endless loading

[shadowvzs]

Image stories: if i use same image url then i get endless blackoverlay+loader after 1st image so should be some issue if you used url like key

Video stories: sometimes endless loading+blackoverlay, sometimes skipped and sometimes and sometimes played, should be some video load/preload issue?

import React from 'react';
import Stories from 'react-insta-stories';

const stories = [
  {
    url: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg',
    type: 'image'
  },
  {
    url: 'https://www.sample-videos.com/video312/mp4/720/big_buck_bunny_720p_1mb.mp4',
    type: 'video'
  },
  {
    url: 'https://scontent.ftsr1-2.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p526x296/117592197_23845254985100631_535175995998606741_n.jpg?_nc_cat=103&_nc_sid=67cdda&_nc_ohc=OpjhTO10kDYAX-8N0jV&_nc_ht=scontent.ftsr1-2.fna&oh=1c7092d971e24c980039efc7aa6e866c&oe=5F8298BD',
    type: 'image'
  },    
];

function App() {
  return (
    <div className="App">
      <Stories
        stories={stories}
        defaultInterval={15000}
        width={432}
        height={768}
      />
    </div>
  );
}

export default App;

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-insta-stories": "^2.0.4",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[mohitk05]

Hi @shadowvzs , this seems to be due to the Chrome autoplay policy. If the user never interacts with the webpage before the video starts playing, the video would not autoplay; and if autoplay is required, the video must be muted. If you try clicking through one of the stories and come to the video story it plays well. I'll include a fix for this in a currently open PR #80. Need to think of an intuitive way to prompt the user to interact. Thanks for bringing this to notice!

[shadowvzs]

Hi @shadowvzs , this seems to be due to the Chrome autoplay policy. If the user never interacts with the webpage before the video starts playing, the video would not autoplay; and if autoplay is required, the video must be muted. If you try clicking through one of the stories and come to the video story it plays well. I'll include a fix for this in a currently open PR #80. Need to think of an intuitive way to prompt the user to interact. Thanks for bringing this to notice!

this is the reason why it is autostarted then became broken but if i click then it will unpaused and work in background and when? (the bunny video - 1st) https://diricoshare.blob.core.windows.net/sharex/sR8h55JhhR.mp4

[mohitk05]

@shadowvzs this should be fixed now, please update to latest version v2.1.0.