JW Player not showing flash mode and also showing no player controls on an Asp.Net MVC view
Question
I am using jwPlayer 6.8 on a View in my Asp.Net MVC application. I am using following javascript code for streaming a video on player:
var el = document.getElementById("player");
var player = jwplayer(el).setup({
file: "W-UNIT1",
streamer: "rtmp://my-server/live",
type: "rtmp",
width: 383,
height: 300,
controls: true,
primary: "flash",
modes: [
{ type: "flash", src: '/jwPlayer68/jwplayer.flash.swf' },
{ type: "html5" }
],
events: {
onReady: function () {
player.play();
}
}
});
The player plays video fine but if I right click on player surface it shows me regular window's context menu but not flash menu like Settings, Global Settings etc. Also no controls appear on player like mute, play/pause etc. Current version I am using is version 6.8. My browser is Firefox version 27.0.1
What am I missing?
2 answers
solution1
0 2014-03-07 17:01:50
you are using Jwplayer 6.8, then try using below setup instead of your.
jwplayer("myElement").setup({
playlist: [{
image: "/assets/myVideo.jpg",
sources: [{
file: "rtmp://example.com/application/mp4:myVideo.mp4"
},{
file: "/assets/myVideo.mp4"
}]
}],
height: 360,
primary: "flash",
width: 640
});
I think your setup is following old jwplayer parameters.
Jwplayer have guide for this here
Helpful Stackoverflow questions :
how-do-i-play-rtmp-streams-with-jw-player
solution2
0 2014-03-10 10:18:20
It seems like I have once again found answer to my own raised question.
Issue is neither related to rtmp streaming nor is specific to any specific version of JW Player. In fact it occurs not only on newer versions plus older versions. It was occurring because of some custom css of mine, applied onto the JW Player HTML div container. For some reason I was overriding its CSS in my Asp.Net View and it was causing this issue.
My example code:
HTML:
<body>
<script src="http://jwpsrv.com/library/bfifOqXfEeOr_yIACi0I_Q.js"></script>
<div id="player"></div>
</body>
Javascript:
$(function() {
var el = document.getElementById("player");
var player = jwplayer(el).setup({
file: "http://techslides.com/demos/sample-videos/small.mp4",
width: 383,
height: 300,
controls: true,
events: {
onReady: function () {
player.play();
}
}
});
});
CSS:
div[id^=player_]
{
/* Comment this css for correct working of jwplayer */
min-width:383px !important;
min-height:300px !important;
}
Here is the jsFiddle for this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.