I'm doing a simple iframe embed with YouTube videos on a website which is going to be viewed on mobile and desktop. The code I'm using to embed videos is this:
<iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
I was under the impression that a HTML5 player would be served if Flash wasn't available, however when I debug this on a mobile the video is being served in Flash and not working.
Am I using the wrong URL or are there extra things which need to be done to embed the video properly? I've noticed that you can do an iframe embed using JavaScript too.
Here is the actual problem that occurred in your case.
When you embed a youtube video with the following code <iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>
a flash player is actually loaded. In this case your mobile doesn't support flash.
To rectify this issue you can use an HTML5 player which has the following structure <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
You can use this youtube code generator for generating customized player embed code.
Somehow I ended up using the wrong URL, for iframe embedding you must use: http://www.youtube.com/embed/VIDEO_ID
https://developers.google.com/youtube/iframe_api_reference
Related
Im trying some live streaming url like m3u8 url in my blog site which is made by html. But Some streaming link have some more part then m3u8.
Example: http://31.172.87.20:2200/EX/ptvsportshd-pa/tracks-v1a1/mono.m3u8?token=RED_Hqqv1c3nXjqlzBGFPhFuTg==,165803831455.4814651659=|User-agent=REDLINECLIENT
Here you can see a part after m3u8.
Also some link work on VLC Player & MX Player Or Any IPTV player but Don't work in chrome or html web pages.
Example: http://103.99.249.107:81/play/a02m
So my question is how can i play this link into my blogger web page.
Im using this html & js code--
Js Code:
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
html code:
<video width="100%" height="100%" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjB3bOuf7_8FUI1wxGl4f-A3_C9LUpncH5FDp7N2uvXqNopsWb-XQj27o&s=10" controls>
<source src="http://103.199.161.254/Content/ddsports/Live/Channel(DDSPORTS)/index.m3u8" type="application/x-mpegURL">
Can anyone help me?? So that i can play every live stream in html web page? Which is working on iptv player?
Thanks in advance
The parts after the '?' in the URL are parameter that are being passed.
In the example above they seem to be related to authentication of the user or device and some info about the client type.
Many devices and browsers will also not stream HTTP, as opposed to HTTPS, streams by default.
You also need to make sure you have the rights to play the content.
For your blog example, DDSPORTS actually provide some of their livestream on YouTube so you can directly embed that if you are comfortable with the approach (use share button on YouTube and select embed).
I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.
I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
Using a self-hosted video with HTML5
Advantages:
Full Control over markup and interface
Disadvantages:
Browser support is in your hands
Video download will be slower on your server as compared to YouTube
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Performant
Browser support is everything
Disadvantages:
YouTube branded by default
Little control over the interface
Recommended Usage:
Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
For my experience with <iframe> and <video> tags:
I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".
In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.
I'm trying to create a video pop-up that works on Apple devices and I've been playing around with fancyBox & some YouTube videos. Because YT uses Flash, this isn't going to work (which I am just now realizing)
Is there a way to open up an html5 video inside of this pop-up?
I already set that part up:
Here's the page where I'm already using fancyBox: http://legal-replay.com/video-test/
Please help!
<a class="iframe" src="http://www.youtube.com/embed/dP15zlyra3c?html5=1">Open HTML5 Video</a>
I don't know much about fancybox but it looks like you can just have it open any iframe you want, which will work with YoutTube's default embed method. Just pass html5=1 to the iframe.
From what I can tell scouting around stackoverflow, this is only supported for single videos, I don't know if you can force an entire playlist to use HTML5, that might still be a client-preference.
Source
Fancybox Howtwo
I have made a windows store app using the Youtube Iframe API. I can handle events and play video fine but there is a major problem as it doesnt support full screen mode (amongst some other minor niggles).
I have been looking in the app store and I see that the majority of youtube player apps do not use the iframe API, they grab the video direct and put it into the standard HTML5 video player.
I have done a lot of searching and the only way I can see people are doing this is by parsing the youtube page to find the video file the Youtube player is going to play and loading this directly into the media player.
I have a few problems with this method.
I am not sure if this is legal as it may break youtubes terms and conditions
If page at youtube changes it can break app.
Neither of these situations are acceptable.
Is there any way to get full screen to work inside app or get a direct video stream legitimately?
Not sure about the copyright and youtube terms stuff but here is how you do it apparently:
Show Youtube video source into HTML5 video tag?
Looks like it's browser specific and youtube generates different html for different browsers.
I would make an ajax request to the youtube url appending html5-true then use jQuery to scrape the source for the video tag, add your attributes and then append to your page.
Now you have the tag that youtube uses so I'm assuming what works on their webpage will work o yours.
Probably violates all terms and conditions...