I've recently started programming within the Tizen environment and SDK, and I am trying to create a (Samsung)smart-tv application which takes mp4-media links and display those links in form of a video-player, the problem is that whenever I use the html5 video tag, the application takes ages (2-4 minutes) to load, and a lot of the time it doesn't even load at all.
The code has been tested on JsFiddle and locally, and it works perfectly fine there, but whenever I try to execute the same code within the index.html in the Tizen project (which runs in a Samsung TV emulator) it exhibits the behavior I just explained (extremely slow/crashing).
Here are some examples of what I tried:
<html>
<head>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto'
width='640' height='264'
poster="download.jpg" data-setup='{}'>
<source src='sample.mp4' type='video/mp4'>
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
</body>
</html>
I have also tried without the use of video-js, I tried only using the video element, but the same result, it would sometimes work, sometimes not, and when it would work, it would take a long time before it actually loaded. According to the documentations, HTML5 is supported, and the use of the video tag is even "encouraged" by the guides they published. I have also tried generating the HTML with javascript and trying to make it work like that, but no luck.
It could be the video tag implementation of the emulator, codec, etc. I assume that you can't test the code on an actual Tizen TV device so I would suggest adding the event listeners first, and see what's happening, then try the AVPlay API, which I would recommend implementing in your apps.
<body>
<video id='video' width='700' height='400'
poster='yourPosterURI' src='yourVideoURI'
controls style='background:black'>
</video>
</body>
var videoElement = document.getElementById('video');
videoElement.addEventListener('loadeddata', function() {
console.log('Video loaded.');
});
videoElement.addEventListener('timeupdate', function() {
console.log('Current time: ' + videoElement.currentTime);
});
videoElement.addEventListener('seeked', function() {
console.log('Seek operation completed.');
videoElement.play();
});
videoElement.addEventListener('stalled', function() {
console.log('Video stalled.');
});
videoElement.addEventListener('ended', function() {
console.log('Video ended.');
});
Related
Since some days I am trying to get a video source in m3u8 format running as html in the browser. I researched alot and couldn´t find a working solution.
When I was about to quit I accidently found out that the code I have is running on my macbook (before I was developing and testing on a windows machine)...on every browser.
So again I started to research, but still no solution. I know that there is a solution, because the video source I am trying to play is scraped from a website in which I can watch the video on any plattform.
So I tryed to investigate the source website a bit more and found out that it is using jwplayer. Still not able to get it run.
So that is my current HTML-Code (which is running in macos -> Chrome, Safari and Firefox:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<style>
LEFT OUT BECAUSE OF LINE LIMIT AT STACKOVERFLOW
</style>
</head>
<body>
<video id="video" style="width: 100%; height: 100%;" controls></video>
<script>
function playM3u8(url){
if(Hls.isSupported()) {
var video = document.getElementById('video');
video.volume = 1.0;
var hls = new Hls();
var m3u8Url = decodeURIComponent(url)
hls.loadSource(m3u8Url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
}
playM3u8("https://load.hdfilme.ws/hls/9618d6f005e7bf049e324b543727184e/9618d6f005e7bf049e324b543727184e.m3u8")
</script>
</body>
</html>
Research:
How do i embed this m3u8 into jw player
How do we download a blob url video
Playing m3u8 Files with HTML Video Tag
And alot more but don´t want to spam in here...
Someone knows how to solve that and get the video playing on every plattform? Which player to use and how do the code for that look like? Many thanks in advance!
Refering to your other question: Why is link only working from macos operating system
One of the problems is that you have no access to the ressource you are trying to let the videoplayer play. I am not sure if and how you could add the missing headers property from my answer in your other question, but that is the way to go.
We are using tag for acting as an animated GIF replacement on our website(ucraft.com).
On the top screen of the page there is a background image, on which we have text and a call to action button.
After that there is another block of content, where we have a video on the left and text on the right...
After that block there are 2 other blocks with the same scenario: tag and text.
On mobile(iOS and Chrome) the browser is waiting for the videos to autoplay, after which ONLY it shows the background image in the first(top) screen.
Thus Lighthouse is giving an issue that the rendering is not really well organized.
From the other hand, the UX on the website is bad, because the users don't really understand what to do, as the image is not being loaded(which is important) until the ALL videos of the page is loaded.
Due to this, Google's pagespeed gives us a grade of 30 for mobile, but 90 for desktop.
Please see the pagespeed result here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.ucraft.com
Or you may also open the homepage on your device and see...
Here is the code we are using for the video:
<video class="lazy" width="100%" height="100%" webkit-playsinline="true" autoplay muted playsinline="true" data-status="loaded" loop>
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.mp4">
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.webm">
</video>
And this code, that we are putting into the to lazyload the video:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
lazyVideos.forEach(function(video){
for (var source in video.children) {
var videoSource = video.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.load();
video.classList.remove("lazy");
});
});
</script>
Are we missing anything to tell browser to load everything, including the tag and to show the poster, before the video is ready to play?
Firstly, you should be using a background color, a background image, and then your video, in that order. Users shouldn't have to wait for an image nor a video to be able to see some text.
Next, stop lazy-loading your video! The browser already does a pretty good job of deferring video loads. It's not your responsibility to change that.
Finally, there is no poster on your video. Not sure if you intended to use one there or not, but since you mentioned it in your question, I thought I'd point it out.
Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
I'd like to be able to click on a small thumbnail image and have a video start playing in the full size. This is similar to one using a small image that one clicks on to show the full image.
I am using this code for the video
<video src="my_movie.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
Is there a way to set this, similar to youtube, where the there is a small image and clicking on it starts the full size movie, and similar to http://www.reddit.com/r/videos/ ?
If I do
<video src="my_movie.ogg" controls width=100px height=100px>
</video>
Then the movie stays too small to see when clicking on it. It would be nice if there are an initial width and run time width to use. But there is not.
Is it possible to also open the movie in a separate pop-up window instead of a new html page? This way the original web page remains in view?
ps. it will be really nice, if the first frame of the movie is displayed as the small image to click on to run the movie, so that I do not have a to make a thumbnail image of each movie to use as the image.
The reason I want to do this, is that the space I have on the page is small and I wanted to put few movies in one row of a table, hence need the sizes to be small initially.
To Chris:
I've used your updated code. This is what happens: Using IE and Chrome, when I click on the images, nothing happens. However, when right-clicking, I see now a menu that has "PLAY" on it. When selecting this, the movie does play. But it only plays in the small size, not the large size.
When I tried my own .ogv file, converted to HTML video from mp4 using online service, the same thing happens. When I click on the image, nothing happens. When I right-click, and select PLAY, it plays. But still using the small size.
Here is the code I used. Which is your code, I just changed the name of the movie to use mine in this one so I can try firefox.
It seems HTML5 video is still not ready for prime time? How to make it work like with u-tube? Click on small image, opens the large size movie in separate window (it will be nice to have a pop-up window for this) but first it has to work in the same web page, which it does not so far.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" autoplay></video><br/>
<video class="thumbnail" width=150 height=150>
<source src="movie.ogv">
</video>
</body>
</html>
You can go about this many different ways. However, I focused on one part of your question, which was that you thought it might be nice to NOT have to make thumbnail images of each movie.
In order to get that, you have to rely on the HTML5 video tag grabbing the first frame for you. I actually don't recommend you go this route overall, but I wanted to show you how you can accomplish it.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" width=320 height=240 autoplay></video><br/>
<video class="thumbnail" width=100 height=100>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</body>
</html>
You can also test it out here: http://jsfiddle.net/E4uDB/
(FYI: these are mp4s so IE and Chrome work, Firefox does not)
There is work to do with this approach. For one thing, you are asking the page to load videos just to make thumbnails. This is pretty bad as the user has to download the videos just to get a feature you can accomplish server side (at processing time).
You then load the video on the fly into a waiting "main window" which might cause another download, not to mention that this sample does nothing to make sure the video is loaded (which you can do, but I think this sample demonstrated enough of the point) to avoid bad user experience.
I don't recommend this because the better approach is to create image thumbnails in some kind of processing task and link up their image click events to load and play the desired video. You get the gist of how you can direct the video element to load and play a new source from my sample, but it certainly isn't trying to be production ready code.
I would strongly consider developing a server side processing task to create image thumbnails, so you can build a better player and one that doesn't make the browser download ALL of the videos just to make image thumbnails.
Another sample: http://cellbycell.com/files/quickwebsamples/Videothumbnails/videochooser.html
Click on an image and it will open and play the desired video in a new browser window.
The trick to this is that the chooser wires a click event to the images, then it uses the id of the images to pass in a query string variable to the player page. That page picks up the query string and plays the video of your choice. View source on both pages, but some highlights are:
The chooser page:
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
}
function clickHandler(el) {
window.open("http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/VideoPlayer.html?Video=" + el.target.id);
}
</script>
Select your video<br/>
<img id="Tool" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Tool.png">
<img id = "Cat" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Cat.png">
The target player page:
<script>
window.onload = function() {
var videoPlayer = document.getElementById("videoPlayer");
var videoId = queryObj()["Video"];
switch(videoId)
{
case "Tool":
videoPlayer.src="http://techslides.com/demos/sample-videos/small.mp4";
break;
case "Cat":
videoPlayer.src="http://html5demos.com/assets/dizzy.mp4";
break;
}
}
function queryObj() {
var result = {}, keyValuePairs = location.search.slice(1).split('&');
keyValuePairs.forEach(function(keyValuePair) {
keyValuePair = keyValuePair.split('=');
result[keyValuePair[0]] = keyValuePair[1] || '';
});
return result;
}
</script>
Enjoy your video!<br/>
<video id="videoPlayer" autoplay controls></video>
No matter what you decide to do, you have some work ahead of you. I strongly suggest you look for some of the JavaScript video player libraries out there as well. I think it's good to stand on the shoulders of those who've been working at it already.
Start with html5 poster attribute to see if it solves your purpose. Else if you want to expand the video inline, change it's CSS. If you want to expand and play in a popup, try some video popup libs like VLightBox
I have a self-refreshing, hidden iframe included in every page on my website. Each time it refreshes, it checks a database for any new alerts (the website is coded with classic ASP). If the iframe loads and finds a new alert, it will have an embed tag that plays an mp3 notification sound.
My problem is that when the iframe loads with the embed tag, the cursor will lose focus on any text field if the user was typing at the time.
This doesn't appear to be an issue in Safari, FireFox, or Chrome... Only IE, and I'm running IE 9. This is the first time I've dared to add audio to this website... If I can at least have this working with the most recent versions of all the mentioned browsers, I'd be happy.
Here's my embed tag:
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden"></embed>
Here's my code which includes the iframe:
<iframe src="/AllInclude/AlertChecker.asp" style="overflow:hidden;height:0px;position:absolute;top:-1000px" frameborder="no"></iframe>
Here's what my iframe uses to refresh itself:
<script type="text/javascript">
setTimeout ('ReloadPage()', 15000 );
function ReloadPage() {
window.location = window.location;
}
</script>
Thanks!
Update:
I was able to get a working version of the html5 audio tag in place of the embed tag... However, since the audio tag is html5, I would need to add the "DOCTYPE html" tag in every page for this to work on IE. This tag causes huge compatibility issues for my old ASP website... so unfortunately, html5 is not an option.
You could use:
An iframe instead of an audio or embed tag
<iframe id="iframe" src="blank.html" disable="disabled" style="position:absolute;top:-10px;></iframe>
<!--You will need to save a blank html file as blank.html"/-->
<script type="text/javascript'>
/*
add the condition for audio to load
*/
document.getElementById("iframe").src="AllInclude/Sounds/Notification_1.mp3"
</script>
I would suggest however combining it with other options, listed above though...
Alright, well, after finding no good solutions to this issue, I decided to give Adobe Flash a chance, and it seems to be the best option right now. It's not pretty and not the way I'd like to make this work, but it works (and most people have flash installed).
Anyways, here's where I found a free flash audio player that has the capability of starting automatically:
http://wpaudioplayer.com/standalone/
And here's what my code looks like (it only implements the flash player for IE since the embed tag works just fine on other browsers):
<%
BrowserType = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
if onload <> "" AND InStr(BrowserType,"msie") > 0 then
%>
<script type="text/javascript" src="/AllInclude/JS/audio-player.js"></script>
<script type="text/javascript">AudioPlayer.setup("/AllInclude/Flash/player.swf", {width: 290, autostart: "yes"});</script>
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">AudioPlayer.embed("audioplayer_1", {soundFile: "/AllInclude/Sounds/Notification_1.mp3"});</script>
<% elseif onload <> "" then %>
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden;"></embed>
<% end if %>