Issue with the flash fallback of VideoJs with Firefox - javascript

I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing.
Simple question: why?
I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case.
So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append.
This is my test code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf"
</script>
</head>
<body>
<video id="video" src="http://domain.com/flash/video.mp4" control></video>
<script type="text/javascript">
jQuery(function() {
var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
console.log(player);
});
</script>
</body>
</html>
All the files (the swf player, the MP4 video, and the html file) are in the same folder named 'flash'.
Can you help me?

A few things to try here:
Make sure you're loading the video-js css file.
Add the "video-js" and skin classes to your video object as described here (also, it is "controls", not "control"): https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
If you're loading video js from the CDN, you don't need to set the flash.swf option. That may be causing an issue as well.
You shouldn't need to set the techOrder to get Firefox to behave, and you definitely don't need a corresponding video file for each type of "Tech". Flash will play the fallback in mp4 as long as it's above version 9 or so.
I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.

You need a flv Version of your Video when you want to deliver it through flash.
It could be usefull to offer another webm Version of your Video. This should bei played in Firefox and Chrome.
For every Tech you need the correspondenting videofile.

Related

How to make audio play on body onload?

Yesterday I downloaded a responsive navbar tutorial and saw that the author had used button click sound using JavaScript.
So I try the code (copying it) and was able to make it too. When the button is clicked the background music plays well. But when I try adding the same code to body onload function the music din't play.
So, I thought the code has some error but suddenly I opened the HTML file from Opera Mini for Android and the background music appeared. The code which isn't working in advanced browsers like Chrome is working in Opera Mini. Why is this happening?
<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
<script>
function stir0(){
var bbs = new Audio('media/background.ogg');
bbs.play();
alert('bb');
}
function pl(){
var Loops = new Audio('media/button_click.ogg');
Loops.play();
}
</script>
</head>
<body onload="stir0()">
<button id="clk" onClick="pl()">Here</button>
</body>
</html>
As of April 2018, Google had changed their Autoplay Policy. It was implemented in Chrome v.66.
Relevant snippet from the Policy:
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to their home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
The way I understand it, and it seems to be reflected in your experience: Chrome browser mutes any autoplayed audio if no action of the user had been made with the domain that specificly requests the audio to be played. Once a user has made a positive interaction, the rules soften and the media may be played without consent renewal.
You can do the first one (the background music) with pure HTML:
<audio autoplay>
<source src="media/background.ogg" type="audio/ogg">
</audio>
The second one (the button click) you do like this:
//JS
var Loops = new Audio("media/button_click.ogg");
//Make sure this is a GLOBAL variable.
And in HTML:
<!--HTML-->
<button id="clk" onClick="Loops.play()">Here</button>

Unsuccessful attempt in adapting audio-visualizer into codepen...need advise

I tried to adopt this audio visualizer from https://github.com/wayou/audio-visualizer-with-controls onto codepen.io. These are the problems I encountered.
1- The visualizer (bar graph type display) is not working on the canvas field.
2 -There is no sound even though the audio player is playing.
Here is the link to my file in codepen http://codepen.io/cgyc8866/pen/wGRqLw
Here is the HTML file. The CSS and JS file can be viewed in codepen at the above link.
<html>
<head>
<title>audio visualizer with audio element</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>audio visualizer with controls</h3>
<p>star me on github </p>
<canvas id='canvas' width="800" height="350"></canvas>
<br>
<br>
<audio src="http://wayou.github.io/audio-visualizer-with-controls/assets/sample.mp3" id="audio" controls>audio element not supported</audio>
<script src="main.js"></script>
</body>
I hope someone can take a look. I like to get this program working in codepen or at least to know why it is not working. Thank you in advance.
For audio visualization Web Audio API is required and that will require in turn the audio source to comply with cross-origin usage requirements.
This means you need to either upload the audio to the same server and location (origin) as the page using it, or use an external service such as a CDN that allow cross-origin usage.
A tip: since the audio is located on GitHub you can do the following:
Use for example rawgit.com to create a CDN link for it (I am not affiliated with them)
rawgit.com allows cross-origin usage, but to request this you need to add a crossOrigin attribute to the audio tag.
So, in sum:
Modifed pen here
<audio crossOrigin="anonymous"
src="https://cdn.rawgit.com/wayou/audio-visualizer-with-controls/gh-pages/assets/sample.mp3"
id="audio" controls>
audio element not supported
</audio>
(it might take a few second to preload the audio)
The audio can now be used as source for Web Audio API/the visualizer. Note that Web Audio API is not available to IE users.
(Make sure to read the terms of use with the CDN before publishing it.)

Jwplayer can't play video in Chrome

This is my first time using Jwplayer. I am trying to play a video using Jwplayer. The code I have written works in Firefox, IE, Opera but not in Chrome.
It is saying "error loading media : file cannot be played". My code is given below. I am also using CodeIgniter and Bootstrap.
<section class="row">
<div class="col-md-12">
<div id="ad-video">Loading the player...</div>
</div>
</section>
$(document).ready(function(){
jwplayer("ad-video").setup({
file: "http://vatiali.com/assets/videos/choc.mp4",
image: "http://vatiali.com/assets/images/black.jpg"
});
});
I don't think that is the correct fix. I think that is a workaround which is masking the true problem.
The default setting for primary playback mode is HTML5. When operating with the default setting JWPlayer should automatically fallback to playing the video with flash if the browser does not support HTML playback for the video file and the Flash plugin is installed.
I suspect that your JWPlayer implementation only works with Flash.
Please test your implementation on a browser that does not have Flash installed but supports HTML5 playback of the video type you are using. I suspect it will not work.
To further troubleshoot this please revert the primary setting to the default, open the JavaScript console, refresh the page and tell us what error you see.
Here's a guess as to what the problem might be. Is the jwplayer.html5.js file located in the same directory as the jwplayer.js file? If not you can use the 'html5player' option t specify the location of the file.
I had to set the option for primary to 'flash' for my jwplayer setup. The code looks like
video_player_jw.setup({
file: $('#source_url').val(),
height: 360,
width: 640,
primary: 'flash'
});
I am only doing this in chrome as it works fine with primary as html5 in all other browsers.

MediaElementJS very buggy

Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.
The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.

HTML5 video playback on the iPad?

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.

Categories