# Embed video into site - m3u8 on iOS

**URL:** <https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402>\
**Category:** Wowza Streaming Engine\
**Created:** [September 1, 2010, 12:19pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402 "2010-09-01T12:19:03Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_Daze](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Adam\_Daze](https://community.wowza.com/u/Adam_Daze)\
**Post date:** [September 1, 2010, 12:19pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/1 "2010-09-01T12:19:03Z")

</div>

Hi there, wondering if there is a method to embed the iphone m3u8 stream on a site. Some kind of script or player? Basically, i’m trying to avoid the eternal mind-f\*\*\* of submitting an app, and instead I want to use a mini-html-site.

The fun part is, it’s a live stream. If I can code up a small html page with the live stream in its own “box” when the iphone visits, so it can still be part of the general page that would be perfect. Let the people zoom if they want it full screen 😃

Did a few searches but they all relate to quicktime player Video on demand, not an embedded “Frame” in a site of a live stream.

The reason I want this is because we have an ajax object for our chatroom, that loads native on the phone. It’s useless if the only way to watch the screen is in a full-size quicktime player.

---

<div class="post-metadata">

**Author:** ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)\
**Post date:** [September 2, 2010, 2:09am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/2 "2010-09-02T02:09:22Z")

</div>

You can use the video tag, but once you click it, it’s full screen, and I don’t know of any way to do otherwise.

```auto
<html> 
<head> 
<title></title> 
</head> 
<body> 
<video src="http://[wowza-address]:1935/[app-name]/[stream-name]/playlist.m3u8"; controls> 
</video>
</body> 
</html>

```

Richard

---

<div class="post-metadata">

**Author:** ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)\
**Post date:** [September 2, 2010, 2:18am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/3 "2010-09-02T02:18:05Z")

</div>

Not that I know of, but not sure.

Richard

---

<div class="post-metadata">

**Author:** ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)\
**Post date:** [February 17, 2013, 11:05pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/4 "2013-02-17T23:05:37Z")

</div>

Might not like those HTML comment marks “”

Richard

---

<div class="post-metadata">

**Author:** ![Richard\_Lanham](https://avatars.discourse-cdn.com/v4/letter/r/c68b51/32.png) [@Richard\_Lanham](https://community.wowza.com/u/Richard_Lanham)\
**Post date:** [February 17, 2013, 11:07pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/5 "2013-02-17T23:07:51Z")

</div>

nevermind, that should be okay. Turn on Chrome javascript console to see if there is any info.

Richard

---

<div class="post-metadata">

**Author:** ![Jimmy\_Escherich](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@Jimmy\_Escherich](https://community.wowza.com/u/Jimmy_Escherich)\
**Post date:** [September 4, 2010, 9:30pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/6 "2010-09-04T21:30:44Z")

</div>

Hi

On iPhone and iPod it will play in fullscreen, but on iPad it will play inline.

Another thing is to make it autoplay. It is normally not supported by IOS, but this little javascript hack will work on both iPhone, Ipod touch and iPad.

```auto
<video id='myVideo' src='http://xx.xx.xx.xx:1935/live/_definst_/live/playlist.m3u8' controls width="640" height="360" /></video>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
//-->
</SCRIPT>

```

---

<div class="post-metadata">

**Author:** ![Adam\_Daze](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Adam\_Daze](https://community.wowza.com/u/Adam_Daze)\
**Post date:** [September 2, 2010, 11:45am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/7 "2010-09-02T11:45:35Z")

</div>

Yeah, thats the rub. It “launches” in quicktime player. No support for in-browser playing eh?

---

<div class="post-metadata">

**Author:** ![Michalis\_Papamichala](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@Michalis\_Papamichala](https://community.wowza.com/u/Michalis_Papamichala)\
**Post date:** [February 18, 2013, 1:00am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/8 "2013-02-18T01:00:48Z")

</div>

> Hi
> 
> On iPhone and iPod it will play in fullscreen, but on iPad it will play inline.
> 
> Another thing is to make it autoplay. It is normally not supported by IOS, but this little javascript hack will work on both iPhone, Ipod touch and iPad.
> 
> ```auto
> <video id='myVideo' src='http://xx.xx.xx.xx:1935/live/_definst_/live/playlist.m3u8' controls width="640" height="360" /></video>
> <SCRIPT LANGUAGE="JavaScript">
> <!--
> window.onload = function() {
> var pElement = document.getElementById("myVideo");
> pElement.load();
> pElement.play();
> };
> //-->
> </SCRIPT>
> 
> ```

Hi why isn’t this playing on chrome browser?

Is it possible to make it fallback to flash for PC ??

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Michalis\_Papamichala](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@Michalis\_Papamichala](https://community.wowza.com/u/Michalis_Papamichala)\
**Post date:** [February 18, 2013, 1:09am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/9 "2013-02-18T01:09:27Z")

</div>

Do you know any way that it can be possible?

I will try it right now!!

Thanks!

---

<div class="post-metadata">

**Author:** ![Michalis\_Papamichala](https://avatars.discourse-cdn.com/v4/letter/m/838e76/32.png) [@Michalis\_Papamichala](https://community.wowza.com/u/Michalis_Papamichala)\
**Post date:** [February 18, 2013, 1:18am UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/10 "2013-02-18T01:18:04Z")

</div>

I can see the controls but it wont let me push play and no video is playing! And when I right click on the element the options such as play,mute,replay etc are turned off?

Why is this happening?

---

<div class="post-metadata">

**Author:** ![Greg\_Bays](https://avatars.discourse-cdn.com/v4/letter/g/6f9a4e/32.png) [@Greg\_Bays](https://community.wowza.com/u/Greg_Bays)\
**Post date:** [April 9, 2013, 3:20pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/11 "2013-04-09T15:20:28Z")

</div>

> I can see the controls but it wont let me push play and no video is playing! And when I right click on the element the options such as play,mute,replay etc are turned off?
> 
> Why is this happening?

I believe you need to add a type attribute on your video tag. with src BUT without a type can result in the issue you are describing. The mime-type for .m38u file is “application/x-mpegURL” or “vnd.apple.mpegURL” … if you decide to use a .ts file (Transport Stream) the mime is “video/MP2T”

---

<div class="post-metadata">

**Author:** ![bob\_dean](https://avatars.discourse-cdn.com/v4/letter/b/848f3c/32.png) [@bob\_dean](https://community.wowza.com/u/bob_dean)\
**Post date:** [November 29, 2018, 11:55pm UTC](https://community.wowza.com/t/embed-video-into-site-m3u8-on-ios/35402/12 "2018-11-29T23:55:54Z")

</div>

I have an exemple [**Assistir Tv Online Ao Vivo**](http://www.assistirtvonlineaovivo.tk/)