polimediaupv/paella

Preview Poster blocks Player

Closed this issue · 2 comments

theodortruffer commented

Describe the bug

I'm trying to display a preview image by adding it to the metadata section of the data.json. Although image shows correctly, the actual video can not be started anymore. The overlay with the play icon is visible, but clicking it has no effect. When I remove the preview from the DOM, the player can be started again.

To Reproduce

Here's an html and the config.json to reproduce this. If you put this in the same folder as the paella build, it should work (video/image links are not protected), i.e. the bug is observable.
preview_bug.zip

Workaround (if any)

Environment Information

  • OS: Ubuntu 18.04
  • Browser: Latest Chrome & Firefox
  • Paella version: 6.4.3
ferserc1 commented

From version 6.2 onwards, Paella Player must be loaded via paella.lazyLoad() function:

<script>
  paella.load('playerContainer', {
    data: {
      "streams": [{
...

In addition to this, I see that there are many scripts that are being included and are no longer needed. If you have a custom html file, I recommend you to check the index.html file to update your version.

test.html (is configured to be placed in the build/player directory):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8;">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{TITLE}</title>
    <script type="text/javascript" src="javascript/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/lunr.min.js"></script>
    <script type="text/javascript" src="javascript/paella_player_es2015.js"></script>
    <link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div id="playerContainer"></div>
<script>
  paella.lazyLoad('playerContainer', {
    data: {
      "streams": [{
        "type": "video",
        "content": "presenter",
        "sources": {
          "mp4": [{
            "src": "https:\/\/cast.studer-raimann.ch\/static\/mh_default_org\/api\/e74205b4-9ab3-4e43-ad34-390a4f08d34b\/6863f940-fa98-4bf9-acbd-735e897d6d12\/2020_11_17_15_06_32.mp4",
            "mimetype": "video\/mp4",
            "res": { "w": 852, "h": 480 }
          }]
        }
      }, {
        "type": "video",
        "content": "presentation",
        "sources": {
          "mp4": [{
            "src": "https:\/\/cast.studer-raimann.ch\/static\/mh_default_org\/api\/e74205b4-9ab3-4e43-ad34-390a4f08d34b\/58d3e3e6-ae66-4444-8097-a8fdf76680da\/2020_11_17_15_34_45.mp4",
            "mimetype": "video\/mp4",
            "res": { "w": 852, "h": 480 }
          }]
        }
      }],
      "metadata": {
        "title": "Test Dual 4 (double Remuxed)",
        "duration": 22520,
        "preview": "https:\/\/cast.studer-raimann.ch\/static\/mh_default_org\/api\/e74205b4-9ab3-4e43-ad34-390a4f08d34b\/c4fdc97b-26aa-4902-bc45-94632ace47f7\/coverimage.png"
      },
      "frameList": []
    },
    configUrl: "config.json",
  });
</script>
</body>
</html>
theodortruffer commented

@ferserc1 Thanks a lot for your help, works perfectly now!

FYI: The docs still use the 'load' function: https://paellaplayer.upv.es/docs/6.4.x/adopters/integrate/integrate_intermediate.html
But I'll check the index.html in the future, thanks for the hint!