Hi community I would like to solve a problem, I am currently using plyr.io as a player, the detail is that when you want to watch a video on a cell phone in full screen, the player is maximized in portrait mode, there will be some way that by automatically maximizing it is in landscape mode only on the mobile, even when minimize return to portrait, even if the cell phone is in portrait mode.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plyr</title>
<!-- Plyr style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.css" />
</head>
<body>
<!-- Plyr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>
<video id="player" poster="https://i.imgur.com/YC9U2uc.jpg" controls crossorigin>
</video>
</body>
<script type="text/javascript">
const player = new Plyr('#player');
player.source = {
type: 'video',
title: 'Sintel',
sources: [{
src: '//iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.webm',
type: 'video/mp4',
}
],
tracks: [{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt',
default: false,
},
{
kind: 'captions',
label: 'German',
srclang: 'de',
src: '//iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-de.vtt',
},
],
};
</script>
</html>
I have tried with CSS code, but it is not very good, because it only rotates the video, it does not rotate the controls or the poster, which when applied to maximize it applies:
transform: rotate(90deg) scale(1.75);
I think the best would be with JavaScript,Thank you in advance.
Source: https://plyr.io/
You can try with this:
screen.orientation.lock('landscape');
as described here:
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
plyr.io specific, use enterfullscreen and exitfullscreen events along with screen orientation:
player.on('enterfullscreen', event => {
screen.orientation.lock('landscape');
});
player.on('exitfullscreen', event => {
screen.orientation.lock('portrait');
});
var winwidth=$(window).width();
var winheight=$(window).height();
const player = Plyr.setup('#player');
player.forEach (item => {
item.on('enterfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(90deg)", "height": winwidth, "width": winheight, "margin-left": "0px", "margin-right": "0px"});
})
item.on('exitfullscreen', event => {
$(".plyr__video-wrapper").css({"transform": "rotate(0deg)", "height": "100%", "width": "100%", "margin-left": "auto", "margin-right": "auto"});
})
});
Related
I have one website link which currently is working when clicking the link a window pop-up, but I want the onclick to happen automatically without clicking. The onclick should work like onload.
I tried a lot of Google and StackOverflow searches.. but I couldn't find the exact solution to my problem.
Here's my code below:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
document.getElementById('robrowser').addEventListener("click", function(){
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}, false );
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
You can simulate a buttonclick like this:
$("#robrowser").click();
In this case you want to run the method when a page is loaded.
You can just remove the entire onclick listener and call the function initialize() directly:
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
initialize();
The following changes have been made:
button on click event listener moved into the window load function
The source code from the button click event moved into initialize()
button on click event to target the function initialize
window load function calls/executes initialize()
Source code:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
window.addEventListener("load", function(){
document.getElementById('robrowser').addEventListener("click", initialize, false );
initialize();
}, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
</html>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps, happy coding!
i am trying to load assets on javascript using phaser3 engine but on chrome consol it says 'failed to load image' here is my HTML & Javascript code look where i made mistake:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PhaserGame</title>
<script = "text/javascript" src = "phaser.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: {y: 500},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('sky','assets/sky.png');
}
function create() {
this.add.image(400, 300, 'sky');
}
function update() {
}
I think there is some problem with your image location
the same code worked for me, with only changing the image URL
https://codepen.io/devsumanmdn/pen/zaeZwJ?editors=0010
create folder "public" in project and put images here
Iam want the way to add subtitles and resolution options in my Jwpalyer
code
<script type="text/javascript">
//Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.
//jwplayer.key = "Ywok59g9j93GtuSU7+axNzjIp/TBfiK4s0vvYg==";
var videoPlayer = jwplayer('my_video').setup({
file: 'http://content.jwplatform.com/videos/IMUjQRAB-kNspJqnJ.mp4',
image:'http://assets-jpcust.jwpsrv.com/thumbs/F5K02Tmh-720.jpg',
width: '640',
height: 360,
//autostart: true,
skin: {
name: "flat"
},
//timeSliderAbove: true,
//Adding your brand: Logo & Right-click
logo: {
file: './jw-logo/logo_flat.png',
logoBar: './jw-logo/logo_bar.png',
position: 'top-left',
link: 'http://codecanyon.net/user/facetheme'
},
abouttext: "Flat Skin Retina for JW7",
aboutlink: "http://codecanyon.net/user/facetheme",
});
videoPlayer.on('ready',function() {
jwLogoBar.addLogo(videoPlayer);
});
</script>
I searched a lot but could not find enough answers and I hope to get enough answers here
When I do a zoom on a date in the x-axis the chart gets stuck.
This happens only when I work with longs.
With dates it works fine.
I'm new in zing charts and I'm not sure what i am doing wrong
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
and my values are
"values": [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
UPDATE
The reason the chart was getting stuck was the step, It works without scrollX
scaleX:{
label:{},
minValue:1425196800000,
step:"day",
transform: {
type: 'date',
all:"%m/%d/%y"
}
},
You have not given much information related to your chart or chart configuration. Based on what you are saying I'm taking a wild guess at what you are asking. If I'm wrong feel feel to follow up.
What you are missing is the scrollX attribute. This enables the scrollbar. Another option is to enable the preview window. Both of these options work in cohesion with zooming.
Information related to scrollX, preview and zooming in general.
https://www.zingchart.com/docs/tutorials/interactive-features/chart-zoom-pan-scroll/
https://www.zingchart.com/docs/api/json-configuration/graphset/scroll-x-scroll-y/
https://www.zingchart.com/docs/api/json-configuration/graphset/preview/
var myConfig = {
type: 'line',
title: {
text: 'After 2 seconds call API method \`zoomtovalues\`'
},
scaleX:{
transform: {
type: 'date',
}
},
scrollX:{},
series: [
{
values: [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
}
]
};
setTimeout(function() {
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
}, 2000);
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}