neutralinojs / webview

A modified version of C++ webview for Neutralinojs.
MIT License
10 stars 1 forks source link

Local video embedded doesn't render #20

Open pathange-s opened 2 years ago

pathange-s commented 2 years ago

Expected Behavior
Normal display / play of videos / images

Actual Behavior
When local videos are embedded in the .html file, the space is left blank and nothing is rendered

Steps to Reproduce the Problem

  1. Create a sample app.
  2. Edit the index.html file to add the following lines of code :
  3. Have any local-video.mp4 in resources/

    For Video render :

      <p>Local video embed</p>
      <iframe src="./local-video.mp4" frameborder="0" allowfullscreen></iframe>
      </iframe>
      <p>Remote video embed</p>
      <iframe width="420" height="315"
      src="https://www.youtube.com/embed/tgbNymZ7vqY">
      </iframe> 

Specifications

grey4owl commented 2 years ago

I'm not entirely sure if this has a direct connection to neutrailnojs. I found that the same problem occurs in the safari browser and represents a problem with video encoding.

Tested solution:

1. Use handbrake to encode video with web optimization (screenshot).

2. After encoding, rename your encoded video from my-video.m4v to my-video.mp4.

3. Then you can use it with iframe:

<iframe src="./my-video.mp4" frameborder="0" allowfullscreen></iframe>

However (if you using this outside neutralinojs) some browsers might support this way of importing a video with <iframe> but some will act towards the video as a file and attempt to download it (ref). The correct way to display a video is using the <video> tag:

<video width="320" height="240" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>