I have this simple code:
HTML
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
<script src="build/mediaelement-and-player.js"></script>
<link href="build/mediaelementplayer.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<video id="video-player" preload="preload" autoplay="autoplay">
<source type="video/youtube" src="https://www.youtube.com/watch?v=q7o7R5BgWDY" />
</video>
</body>
JS
$(function() {
$('video').mediaelementplayer();
});
I have this uploaded on my server together with the files from http://mediaelementjs.com/ in the build directory. All the mediaelement files are inside the build directory, while index and the js file is in root.
In Chrome this runs without any problems, same goes in explorer/Edge. But FireFox won't run it. The player with all the controlls loads but the video doesn't play and pressing the play button does nothing either. Adobe Flash is enabled in firefox aswell while trying this.
Made the same example in a jsfiddle http://jsfiddle.net/zE26G/27/
Here the video in the jsfiddle instead runs in FireFox, but not in Chrome/IE..
Firebug is giving these warnings in both the examples:
"Specified "type" attribute of "video/youtube" is not supported. Load
of media resource https://www.youtube.com/watch?v=q7o7R5BgWDY failed."
"All candidate resources failed to load. Media load paused."
While the console in Chrome doesn't give any errors.
This is very odd to me. Anyone who have a clue on whats going on here?
This was already reported here: https://github.com/johndyer/mediaelement/issues/1684
I got similar issue and was fixed with updating library to the latest version.
Related
I am trying to stream an audio file in google chrome . The file is hosted at a wildfly server.
Below is the sample code
<html>
<head>
<title>Audio Demo</title>
<script type="text/javascript">
function updateSource(){
var audio = document.getElementById('wavSource');
audio.src = 'https://SERVER_URL:8443/FILE_PATH/FILE_NAME.wav';
var a = document.getElementById('audio');
a.load();
}
</script>
</head>
<body>
<audio id="audio" controls="controls">
<source id="wavSource" src="" type="audio/wav"></source>
Your browser does not support the audio format.
</audio>
<button onclick="updateSource();">Item1</button>
</body>
When the button is clicked, the audio.src is set to the specified file. This sample code works fine in firefox but does not work in google chrome. If I paste the audio file link in a tab, then also nothing happens (not able to play), But I am able to save the file.
On the server side a softlink is created in deployment directory which points to the audio file location.
Some other things that I have noticed is that if I am bundling the audio file in an EAR, then I can access it. Now that the audio file is being generated on the fly in a different location , for which I have created a softlink in deployment directory. In this case I am not able to play it.
Can some one please tell me what is that I am doing wrong?
Thank you
well you code looks fine. I tried it with different audio files and it works. I think issue must be with your audio file or path.
Your sample code works as I checked it with a .wav audio source as you can see below. Check the actual file on your server, that you want to play, whether it's accessible, playable and it's an actual .wav file.
If this doesn't work in your Google Chrome, clear its cache completely, update it, restart your computer and check again. It should work then.
Although please, put your script in the bottom of the body tag:
<html>
<head>
<title>Audio Demo</title>
</head>
<body>
<audio id="audio" controls="controls">
<source id="wavSource" src="" type="audio/wav"></source>
Your browser does not support the audio format.
</audio>
<button onclick="updateSource();">Update Source</button>
<script type="text/javascript">
function updateSource(){
var audio = document.getElementById('wavSource');
audio.src = 'http://www.wavsource.com/snds_2018-06-03_5106726768923853/people/men/about_time.wav';
var a = document.getElementById('audio');
a.load();
}
</script>
</body>
</html>
Source: WavSource.com
I have finally solved the issue. It is related to Wildfly 10.0.0. See this link.
All of your audio your files MUST be named as HTTPS, not HTTP. It's a security issue with Chrome.
For one year I couldn't figure out why my random MP3 play JavaScript code stopped working. It worked on Firefox, but not Chrome or Internet Explorer. I tried everything I read online, but nothing worked. I just needed to add an "s" at the end of each "http" for each audio file in the JavaScript code. I had 3,080 files...lol. My webpage works fine now.
Also, your website must be secure. Even if you have security certificates, they won't work unless you activate them, which you can learn how to do online. You can tell if your website is secure by looking for a little closed lock symbol before each web address above.
In Coda on my iPad Pro I have the following two files in a single directory that I named assets. When I try to preview the template.html file either in Coda or Safari (in side by side mode) I cannot get any interaction with javascript calls on events.
I have consulted the panic library regarding this and tried searching if similar issues have been encountered, but to no avail. The documentation clearly states that html/css/javascript rendering is supported by the preview functionality of Coda.
I have tried including the script directly in the head, the body, importing in a script tag and importing in a source tag and none have worked. CSS styling works as expected. I have tried many iterations that I won't list below, but this is the simplest case that I'm currently working with.
assets/template.html
<!DOCTYPE html>
<html>
<head>
<source type="text/javascript" src="assets/scripts.js"></source>
</head>
<body>
<h1 class="myheader" id="theheader">Hello?</h1>
<button onclick="doStuff()">click me</button>
</body>
</html>
assets/scripts.js
doStuff(){
document.getElementById('theheader').style.color = 'red';
}
When I go to this url : (warning: some Ad-blocker is recommended)
https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda
The web-page link loads fine, without errors.
However, when I try to load same page via iframe in my html code, an error appears:
My html code :
<html>
<head>
</head>
<body>
<iframe width="600" height="700"
src="https://openload.co/embed/M4pSomdJWME/?c1_file=http://tugaflix.com/legendas/716bac991518958ad95df18200c906c3.srt&c1_label=Legenda">
</iframe>
</body>
</html>
Below image: Error result within my iframe. How to fix such error?
If you're willing to design/code your own player interface then one loading option is to use a <video> tag instead of via <iframe> tag...
<video width="640" height="480" controls crossorigin="anonymous">
<source src="https://oload.stream/stream/M4pSomdJWME~1508775093~213.205.0.0~IzmpIUe0?mime=true" type="video/mp4">
</video>
I'm not going to tell you how to steal access any video by code, but some advice is:
1) You can see in the source code that a server 1508775191~213.205.0.0 is accessed for media files including subtitle VTT file). Study rest of source code. Consider why token is mentioned and why referrer is checked. What can you do pass and get same access?
2) By using your browser's Developer Tools (especially "network" and "console" tabs), you can find the related https://oload.stream/stream/ url for any future updates or alternate embeds.
PS:
"but, this tugaflix.com/Episodio?E=2310910&S2 website is using that iframe"
Look at source code of: http://tugaflix.com/Episodio?E=2310910&S2/
You will see that no iframe is mentioned or used... They are even using two different player interfaces so you cannot assume that tugaflix.com is loading this page https://oload.stream/embed/M4pSomdJWME within some iframe. They are instead accessing the MP4 video file from some server calledhttps://lemonade-fruit.fruithosted.net/
The target site has code that prevents it from being shown in an Iframe. Unfortunately you will not be able to use that url in an Iframe.
I see SWFs download twice in IE, but not in Chrome. I'm using IE 11. I can see the download requests in the F12 dev tools Network tab and in server access logs. Below is a simple example that exhibits the problem. I'm using swfobject 2.2. I've tried calling swfobject.switchOffAutoHideShow() before calling swfobject.embedSWF(), but that doesn't help.
You can test this by putting the HTML and swfobject.js in the same directory and browsing from the disk, so you don't need an HTTP server to test/reproduce this.
Does anyone know why this happens and how to stop the second download?
<!DOCTYPE html>
<html>
<head>
<title>My Version</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf",
"flashInfo", "100%", "100%", "9.0.0");
</script>
</head>
<body>
<div id="flashInfo">
<p>No flash here. Move along.</p>
</div>
</body>
</html>
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.