I have tested the HTML5 video player, it can make HTML5 video fullscreen on Android Chrome browser but not Dolphin browser.
Is someone know what is the way to make HTML5 video fullscreen on Dolphin browser?
Thanks
Tested that jplayer can make HTML5 video in fullscreen, ever in Android 4.x default browser and Dolphin browser, the config should refer to below code:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "demo.m4v"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
fullScreen: true
});
Related
I am working on a React Native app that displays HTML content using the react-native-render-html library. This HTML data is coming from content formatted in WordPress. The same content is also being displayed in the web app made with ReactJS. I am also using this iframe plugin, as recommended by the render-html library, to display the iframes in my HTML.
I have the following problem with rendering Twitch video embeds.
The Twitch embeds are in this format:
<iframe src="https://clips.twitch.tv/embed?clip=ShortHelpfulSquirrelCmonBruh-hWj49qxBfx-VKseO&autoplay=false&parent=my.parent.domain" width="640px" height="360px" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
Please note that these are not live streams, but clips. The ReactJS website displays these embeds correctly with the thumbnail:
With the same embed code, however, my React Native app displays the embed without the thumbnail but with just a black background (although it shows the title and controls):
Once I play and pause the video, the background does not remain black, however:
Here is the rendererProp that I am passing to the library for iframes:
iframe: {
scalesPageToFit: true,
webViewProps: {
scrollEnabled: false,
mediaPlaybackRequiresUserAction: true,
javaScriptEnabled: true,
domStorageEnabled: true,
userAgent: Platform.select({
ios: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15",
android: "Chrome/56.0.0.0 Mobile android",
}),
},
}
I am passing the IframeRenderer and iframeModel as imported directly from #native-html/iframe-plugin (linked at the beginning) into the renderers and customHTMLElementModels props of the <RenderHtml/> component. Also I am using the WebView from react-native-webview lib.
My team and I cannot figure out why the thumbnail is not appearing in the react-native-webview, but works fine in the website. If anyone has any experience rendering Twitch video iframe embeds on react-native-webview, please take a look. Any help will be appreciated.
I am trying to implement a toggle video feature using webRTC. Refer to the following code:
<video id="remote" autoPlay></video>
<button onclick="toggleVideo()">Toggle video</button>
let localVideo = document.querySelector('#local');
const toggleVideo = () => {
localVideo.srcObject.getVideoTracks()[0].enabled = !localVideo.srcObject.getVideoTracks()[0].enabled
}
This turns off video as well as webcam indicator in firefox but not in chrome. Chrome only turns off the video.
According to MDN docs,
If the MediaStreamTrack represents the video input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. For example, the green "in use" light next to the camera in iMac and MacBook computers turns off while the track is muted in this way.
MDN docs
Is there any other workaround?
I have used JW Player plugin in my joomla website. We have a lot of videos to upload in our website, so we are using Amazon. In the desktop webbrowser the controls of player are working fine. But in mobile and safari webbrowser the controls are not shown properly.
This is the code I have added for amazon tag({amazon}{/amazon}).
<script type=\"text/javascript\">
jwplayer('{SOURCE}').setup({
'playlist': [{
sources: [{
'file':'https://s3.amazonaws.com/qa-mp4format/{SOURCE}'
},{
'file':'rtmp://srzg2rz4587c9.cloudfront.net/cfx/st/mp4:{SOURCE}'
}]
}],
'image': '{PLAYER_POSTER_FRAME_REMOTE}',
'height': '{HEIGHT}',
'width': '{WIDTH}',
'autostart': '{PLAYER_AUTOPLAY}',
'repeat': '{PLAYER_LOOP}',
'primary': 'flash',
'controls': '{JWPLAYER_CONTROLS}'
});
Please help me to solve this problem.
The JW controls will show up by default, so you can take that out of your configuration. Also if you are concerned about your mobile viewer experience, you will not want to force 'flash'.
I'm using IBM Worklight 6.2
I'm using window.open to load some external pages for OAuth and I configure event listeners for the opened window.
var authWindow = window.open(authUrl, '_blank', 'location=yes');
authWindow.addEventListener('loaderror', function(e) {
console.log(">> load error. event: " + JSON.stringify(e));
});
also for "load" and "loadstart" events.
This works in Android and iOS but when I preview the app in the "Mobile Browser Simulator" the eventListeners are not executed.
I have also tested creating a "desktopbrowser" application.
Any idea?
Loaderror, loadstart, and loadstop are specific to Cordova and not supported in the Mobile Browser Simulator. It would be best to test these on emulator or device. Please see: http://cordova.apache.org/docs/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#addEventListener
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});