# MP4 HTML5 Video - Bug - No live page view?

**URL:** <https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639>\
**Category:** Bug Reports\
**Created:** [February 21, 2018, 2:12am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639 "2018-02-21T02:12:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [February 21, 2018, 2:12am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/1 "2018-02-21T02:12:54Z")

</div>

Hello,

Does Pinegrow have an issue or restriction previewing and playing **mp4** video via it’s “ **live page view** ” ?

By contrast webm and ogg preview correctly but mp4 does not play. If you happen to include all 3 sources ( mp4 / webm / ogg ) you would not realize the issue is present. My tests were on Mac, so I’m not sure if the same issue persists on Windows and Linux.

Here are two basic examples that should demonstrate the problem:

* * *

Example 1:

```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML5 Video</title>
	<style type="text/css">
		.vid-size {
			width: 427px;
			height: 240px;
		}
	</style>
</head>
<body>
	<div>
	<p>Example 1 -- mp4 only -- will not show / play</p>
		<video id="video1" class="vid-size" controls >
			<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
		</video>
	</div>
	<p>Example 2 -- mp4 / webm / ogg -- plays but uses other source, not mp4</p>
	<div>
		<video id="video2" class="vid-size" controls >
			<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
			<source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
			<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
		</video>
	</div>
</body>
</html>

```

* * *

Example 2:

```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML5 Video</title>
	<style type="text/css">
		.vid-size {
			width: 427px;
			height: 240px;
		}
		.grey-button {
			display: inline-block;
			margin: 2px;
			padding: 10px 20px;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			color: black;
			border: none;
			background-color: #e7e7e7;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div>
		<video id="video" class="vid-size" controls ></video>
	</div>
	<p id="vid-source">Choose a Video Source:</p>
	<button class="grey-button" onclick="changeVideo('https://www.w3schools.com/html/mov_bbb.mp4')">MP4</button>
	<button class="grey-button" onclick="changeVideo('https://www.w3schools.com/html/mov_bbb.webm')">webm</button>
	<button class="grey-button" onclick="changeVideo('https://www.w3schools.com/html/mov_bbb.ogg')">ogg</button>
	<script type="text/javascript">
		function changeVideo(vURL) {
			document.getElementById('video').setAttribute("src", vURL);
			document.getElementById('video').load();
			document.getElementById('video').play();
			document.getElementById("vid-source").textContent = vURL;
		}
	</script>
</body>
</html>

```

* * *

So is it just me, or does Pinegrow have an issue with previewing and playing mp4 videos on page via its live page view?

I also backwards tested things from Pinegrow 2.951 up to the latest version 4.3. With each version resulting in the same outcome of not playing mp4 videos. Also regardless of trying multiple video sources. This was also confirmed by one other Mac user as well.

Is there some underlying issue, glitch, oversight, restriction, or bug regarding MP4 and “live page view” in Pinegrow ?

Thanks. 😉

❤ 🌲

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [February 21, 2018, 6:57am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/2 "2018-02-21T06:57:06Z")

</div>

Due to licensing issues, Pinegrow doesn’t ship with the necessary codecs for **patented** media formats.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 21, 2018, 9:11am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/3 "2018-02-21T09:11:47Z")

</div>

mmmm, a hack called for? 🙂  
yoo hoo… @itsmeleo… 😃

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [February 21, 2018, 9:59am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/4 "2018-02-21T09:59:03Z")

</div>

This is just a preview issue in PG, if you preview from the browser, these media are visible.  
I don’t think there is a big deal here …

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 21, 2018, 10:05am UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/5 "2018-02-21T10:05:48Z")

</div>

yes no problems.  
just the _fun factor_ of a bit of a nice challenge 🙂

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [February 21, 2018, 1:38pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/6 "2018-02-21T13:38:23Z")

</div>

Thanks for the response @Emmanuel

> [@Emmanuel](#):
>
> This is just a preview issue in PG, if you preview from the browser, these media are visible.

Yes I was already aware of that, so I was specifically questioning Pinegrow’s “live page view” inabilties.

> [@Emmanuel](#):
>
> Due to licensing issues, Pinegrow doesn’t ship with the necessary codecs for patented media formats.

I had not throught of that. But yes now that I am tipped as to what to look for I see it being discussed.

- [Enable Proprietary Codecs - NW.js Documentation](http://docs.nwjs.io/en/latest/For%20Developers/Enable%20Proprietary%20Codecs/)
- [H264 by CISCO · Issue #1393 · nwjs/nw.js · GitHub](https://github.com/nwjs/nw.js/issues/1393)
- Etc., etc.

> [@Emmanuel](#):
>
> I don’t think there is a big deal here.

Seems to be for many from what I have now seen after looking into it surrounding NW.js.

I see there are suggestions for recompiling FFmpeg. Seems like some are trying:

> **[Enabling Proprietary Audio/Video Codecs in NW.js - TangibleJS](https://tangiblejs.com/posts/enabling-proprietary-audiovideo-codecs-nw-js)**
>
> Due to licensing issues, NW.js cannot play files encoded with proprietary formats (such as H.264 and AAC) out of the box. However, there is a quick and easy workaround to that problem. This article will tell you what it is. A bit of background \[TLDR:...

> **[Releases · nwjs-ffmpeg-prebuilt/nwjs-ffmpeg-prebuilt](https://github.com/nwjs-ffmpeg-prebuilt/nwjs-ffmpeg-prebuilt/releases)**
>
> FFmpeg prebuilt binaries for NW.js / Chromium. Contribute to nwjs-ffmpeg-prebuilt/nwjs-ffmpeg-prebuilt development by creating an account on GitHub.

* * *

🤔 Sigh. Codecs & Patents, not much has changed in 20+ years, a pitty.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 21, 2018, 5:22pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/7 "2018-02-21T17:22:55Z")

</div>

Good bit of detective work there.  
so! which version of NWJS does the current Pinegrow 4.3 use, in order to experiment with the  
mac dylib

found

here

> **[iteufel/nwjs-ffmpeg-prebuilt](https://github.com/iteufel/nwjs-ffmpeg-prebuilt/releases)**
>
> FFmpeg prebuilt binaries for NW.js. Contribute to iteufel/nwjs-ffmpeg-prebuilt development by creating an account on GitHub.

?

I found a libffmpeg.dylib version at /Applications/Pinegrow\_4.3.app/Contents/Versions/63.0.3239.108

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [February 21, 2018, 6:28pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/8 "2018-02-21T18:28:14Z")

</div>

I’m would assume they use the latest NW.js release for Pinegrow builds they release (secrity/performance/etc.), but I’m not sure if that is the case. They may however stay back a bit to ensure compatibility or reliabilty. But based on the assumption date wise that they use the latest upon release, then between the two these would match up.

![nwjs](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e3c9ea44cf03e2e16c5c6f665e219150d7385548.png)

![pinegrow](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3b06553807279630ef87e92d7158c2a4ec7e4d8e.png)

![nwjs](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/ccea7f1ad898eadadbc24a7b1dbbdcf78ca0be3f.png)

But that is merely my assumption. 😶

* * *

I had initially hoped it was an some underlying issue, glitch, oversight, regarding MP4. That could be fixed and released as part of the app itself.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 21, 2018, 10:36pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/9 "2018-02-21T22:36:25Z")

</div>

Yeah, I did the same as you wrt the dates.  
So, have you tried the replacement and seen if it allows you to view your file in Pinegrow Preview?  
if so, how did it go?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [February 21, 2018, 10:56pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/10 "2018-02-21T22:56:16Z")

</div>

Yep! 🙂  
that works.

that version works fine and plays.  
latest version causes it to crash to desktop on rendering 🙂

tidy! I now have more versatile Pinegrow 😃  
good catch and link hunting @Pinegrow_User  
[https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0657276177b7800cd55d4b238405d82375ecc86c.mp4](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0657276177b7800cd55d4b238405d82375ecc86c.mp4)

_Pimped!_

My very own PimpGrow 4.3.  
Lovely

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [February 23, 2018, 1:24pm UTC](https://forum.pinegrow.com/t/mp4-html5-video-bug-no-live-page-view/1639/11 "2018-02-23T13:24:04Z")

</div>

Yes, I had tried things also and it does resolve the issue in Pinegrow.

I understand the licensing, legalities and the aspects that entails. But as stated I had hoped it was a simple oversight or glitch — I just had not thought of the patent aspect when I posted.

So if desired people can pair up the correct versions of the modified “nwjs-ffmpeg” linked and referenced above. But doubt that I want to remember and mess with applying patches with each update of Pinegrow, etc., even as ‘easy’ as it is to do.

At least the issue is deciphered and a fix is available to those whom desire it. I just wish it was resolvable and part of the Pinegrow releases.

> 3 options to resolve the issue of playing MP4 in Pinegrow (live page view):
> 
> - Swap and use the corresponding version of the “[nwjs-ffmpeg](https://github.com/iteufel/nwjs-ffmpeg-prebuilt/releases)” patch
> - Reference multiple video sources
> - Preview page in browser (CMD+B) and view in Chrome, not Chromium (NW.js / Pinegrow)
> - etc.,

**Onward.** Thanks for the discussion @schpengle, and your responses @Emmanuel .

🌲 ❤
