Jwplayer can't play video in Chrome - javascript

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.

Related

Is Javascript needed to play HTML 5 Videos in recent browsers?

Based on this page on w3schools I don't see any mention of Javascript being needed to play HTML5 videos on recent browsers.
https://www.w3schools.com/html/html5_video.asp
Yet, when I disable Javascript on Safari, I can no longer play Videos embedded on my webpage via Tag. I even disabled lazy loading on a test page to see if that helped, but it didn't.
My primary concern is visitors on Mobile devices so falling back to flash is not an option.
hence the question, Is Javascript needed on fairly recent browsers ? what are best fallback options without requiring any plugins ?
like, using to provide direct download of Video, etc ?
javascript is absolutely not required to play the video in html5
the w3 video is not playing because it is rendering that part of the dom using js and also video is not local it is brought by anchor tag

embed youtube video doesn't play automatically on device mode of google chrome

I'm trying to add embed youtube video in my Ionic project, just using iframe.
Once I added, it works on the normal web browser(Google Chrome).
However, if I changed view mode to device mode(F12 & Ctrl+Shift+M), and refresh browser, the embed video stopped auto-playing. Is there anyone have experience before fixed like this problem?
Here is the similar case with mine: http://jsfiddle.net/eFLqJ/1005/
This module will be helpful for your problem: https://github.com/orizens/ng2-youtube-player

How to translate HTML 5 video with angular-translate?

I'm using the Angular JS extension angular-translate for language changing in my Cordova hybrid app with Mobile Angular UI.
The problem:
I found that I can't play the videos. And the video control bar is disabled. I looked in the source with Chrome's "Element Inspector" and saw that the file is there in <source>. I tried to copy the fully address and paste in the browser address bar and hit enter and the video started to play there in the browser window. So I know that the source address is the right one.
I realized that it could be a translate problem since I get the filename with translate code. And that is loading after the page is loaded. Then I tried to add translate-compile attribute to the element. Didn't worked.
So. What to do?
Here is the code:
<video controls poster="img/video-posters/{{'view-vid-img' | translate}}"><source src="img/videos/{{'view-vid-nme' | translate}}" type="video/mp4">Video not supported</video>
Edit:
Here is a demo:
https://plnkr.co/edit/ZZPJL1ReOC0ZOz4VI4kU?p=preview

How to ensure cross browser AAC+ playback?

I have an Icecast server serving AAC+ (HE v2). I use JPlayer in my webpage to play the content. In Chromium without Flash Player it works just fine.
For Flash enabled browsers it does not work out of the box. I read that Icecast wants to have a "type=.flv" appended to the stream request to make the content playble by Flash Player, and although I have trouble finding the Icecast documentation about it, indeed it works on Firefox with Flash Player 11. But it does not play on other browsers with Flash 15 and above, namely Google Chrome on Linux, Firefox and Internet Explorer on Windows. Google Chrome plays it just fine by disabling Flash Player.
The audio data are downloaded correctly as shown by Developer Tools, audio is heard for about one second and then silence.
Is there anything I can try to make AAC+ playback possible with Flash Player ?
A link:
http://148.251.184.14:18044/chr_xmas
By default it returns a header with Content Type audio/aac. By appending "?type=.flv" (with a dot), it returns Content Type video/x-flv.
Turns out this is a jPlayer issue. I noticed at the bottom a mention by a jPlayer fork with a crude hack which is good enough for my purposes.
It didn't work right off the bat though, I changed the line to
if( myStream.bytesLoaded > 2048 ) return 1;
as it seems that in my case bytesTotal was not uint.MAX_VALUE. I had to compile a new .swf with flex and it worked like a charm on Firefox and Internet Explorer.

Issue with the flash fallback of VideoJs with Firefox

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.

Categories