Hey all I am using react player to running the video inside my application. But the problem is when I use larger size video that is of more than one minutes then react player showing black interface.
you can see the image below.
[1]: https://i.stack.imgur.com/Hf3Ka.png
No control is working properly.
I am using following code for this operation.
<ReactPlayer
// Disable download button
config={{ file: { attributes: { controlsList: 'nodownload' } } }}
// Disable right click
onContextMenu={e => e.preventDefault()}
// Your props
url="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
className="react-player"
controls
width="100%"
height="100%"
/>
Please someone help me. Thank you in advance.
Related
I'm trying to access my camera as a video element but when i run the programme it is not visible.
Here's my code:
const myvideo=document.createElement('video');
myvideo.muted=true;
const videoGrid=document.getElementById("video_grid");
//I'm using a div element with id "video_grid" in my HTML file.This div does not contain any data (or child element) every property is set to default.
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then((stream)=>{
addVideoElement(myvideo,stream);
}).catch((e)=>console.log(e.name +":"+e.message ));
const addVideoElement=(video,stream)=>
{
video.srcObject=stream;
video.addEventListener('loadmetadata',()=>{
video.play();
});
videoGrid.append(video);
}
//HTML
<body>
<div id="video_grid">
</div>
<script src="script.js"></script>
</body>
The video stream is only visible after I click show controls button. Can you help me to fix this?
Here's an example:
this is the camera view i get after clicking show controls and now i can play it manually
I feel like it would provide better context if we could also see the HTML and CSS of it, but a quick look at your code shows this attempt to getElementById:
const videoGrid=document.getElementById("video_grid");
But there is no id to be found. Perhaps adding this will help your code get the element properly:
myvideo.id=""video_grid"
I have some embed code like:
<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe>
I am trying to access this video using Javascript but the Video ID is not known in advance (it must be able to be set within our CMS and be changed by any editor). Also it is possible to have more than one video on the page. Hard-coding the video ID(s) in my .js file is not possible.
Using the Javascript API, I need to write a custom play/pause function (passing in the button object they clicked) and also to detect when the video has ended and re-start it (to imitate looping, which Dailymotion apparently does not support for some reason). But it seems a call to:
DM.Player(document.getElementById(iframeID), { video: VIDEO_ID})
requires the video's ID to be known (I do know the iFrame ID where the video is but apparently that isn't enough to access the player like it is for other video platforms).
I then need to be able to create a function to call play or pause based on whether the user has clicked the play/pause toggle on a specific video. My Javascript knowledge isn't great, but I have been able to do this with other platforms by knowing the iframe ID. The play/pause does work if I hard-code a video ID but only if there is one video on the page and only if I do not try to "loop" the video.
This is a private video, if that matters - we want it to only be viewed on our website and not on Dailymotion.
Pseudo-code greatly appreciated as I find their API documentation a bit incomplete for a newcomer (such as not specifying if parameters are required or optional, and not listing available options like for params and events during DM.Player initialization)
EDIT: Here is how I access the video API with other video hosting services (YouTube, Vimeo, Brightcove, etc)
I build an array of all HTML elements with a certain class name (recall there can be more than one video). Say the class name is ".video" so I build an array of all ".video" on the page and their corresponding HTML id. I then use document.getElementById to populate the array with the players.
Then in the play/pause click function, I can access the video like so:
var player = players[index];
var state = player.getPlayerState();
if (state == 1) {
player.pauseVideo();
}
else {
player.playVideo();
}
This does not work for Dailymotion because the actual DM Video ID (and not the HTML element's ID) must be known in advance. I was wondering if there is a way to access the video via the Javascript API without knowing the video ID?
I don't use DailyMotion API but I knocked up this experiment which might be useful to you.
See if the comments in my example code below help you to understand how to use your own buttons with JS functions and how to handle video "end" event etc.
<!DOCTYPE html>
<html>
<body>
<!-- 1. Load DailyMotion API (Javascript) -->
<script src='https://api.dmcdn.net/all.js'> </script>
<!-- 2. Create container for DM Player instance -->
<div id='player'></div>
<!-- 3. Javascript stuff goes here -->
<script>
//Set VIDEO_ID (retrieve or update from your CMS)
//**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID**
var VIDEO_ID = "xwr14q"; //update this via your CMS technique
//Create DM Player instance//
var player = DM.player(document.getElementById('player'), {
video: VIDEO_ID,
width: "100%", height: "100%",
params: { autoplay: false, mute: true }
});
//Handle video ending (seek back to zero time)//
player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() } );
//Control functions for DM Player instance//
function func_Play()
{ player.play(); }
function func_Pause()
{ player.pause(); }
</script>
<p>
<!-- Buttons for play pause -->
<button onclick="func_Play()"> PLAY </button>
<button onclick="func_Pause()"> PAUSE </button>
</p>
</body>
</html>
Also regarding
"...It is possible to have more than one video on the page"
Do some "experience quality" tests. Just be sure your users don't mind multiple looping videos running at once (eg: may slow your page / their browser, or drain their data allowance if on mobile, etc).
To handle multiple videos, I would just put each video player in it's own HTML page (like above shown code) and then in main page just load multiple iframes pointing to each player's HTML.
I integrated Vimeo Video in my site and I used 'background= 1' parameter in query string to remove all the default functionalities but it cause a problem that my Video get muted when it loads and I want to unmute the video on page load.
I am beginner so please Give me some good and simple solution keeping in mind that background = 1 should stay there.
Here is what I tried so far:
<script>
var dynamicContent = getParameterByName('background');
$(document).ready(function() {
if (dynamicContent=='1') {
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
}
});
</script>
I'm loading Kaltura's video player in a learning management system (essentially a CMS for educators and their students), and it gets presented inside an iframe. With current browser security protocols as they are, full screen viewing is not possible. I need to disable the fullscreen capability for this use case. Here's an idea how we have the embed set up:
loadMovie: function(id) {
var autoPlay = this._autoPlay;
var allowFullScreen = this._allowFullScreen;
kWidget.embed({
'wid': '_' + this._partnerId,
'targetId': this._playerTarget,
'uiconf_id': this._playerId,
'entry_id': id,
'params': {
'wmode': 'transparent',
'allowFullScreen': allowFullScreen, // not working for html player
},
'captureClickEventForiOS': true,
'readyCallback': function (playerId) { // autoPlay movies
var kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', function() {
kdp.sendNotification('doPlay');
});
}
});
}
I've been able to hide the fullscreen button with CSS, but a user can still (intentionally or inadvertently) double-click the playback area to achieve fullscreen. Because of the iframe issue, the video essentially disappears, leaving the user confused and unable to easily close the player modal.
I'm passing a data attribute from the movie links to the player init function to indicate when fullscreen should be unavailable. I just need to find out how to actually do the disabling. Kaltura's documentation has not been helpful.
I've also fiddled with legacy Flash params, but they have no effect on the HTML 5 player. I'm using version 2.11. Thank you.
You need to put this in a script tag:
mw.setConfig('EmbedPlayer.EnableFullscreen', false);
Why don't you simply put a div overlay on top of the player with z-index, say 10000. That way, even if some double-clicks, they are clicking on the DIV and nothing happens. Continue with the CSS button hiding.
I'm using flowplayer to play an MP4 video on a website from a NGinx server with H264 streaming plugin, and the pseudostreaming plugin for Flowplayer. Everything works fine.
I implemented several javascript functions for deep linking into the video, with the $f().Seek() method, which also works fine.
Here is my problem : when the user seeks to a particular place in the video, I need to disable some elements on the page, to prevent him or her from clicking more times, jamming all the sync. Then, I want to re-enable the same elements when the video starts playing again.
This code disables the elements and is placed in the click event of some buttons. Straightforward :
$('.cur-left, .cur-right, .book-temps').hide('fast');
This code enables them :
$('.cur-left, .cur-right, .book-temps').show('fast');
I can't find where to place my "re-enabling" code, as no event seems to happen when the video restarts playing after buffering after a seek.
Any advice on an unknown event matching or a trick to fit it some other way would be unvaluable.
Thanks for reading.
You need handle onBufferFull event:
<!-- player container -->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" id="player"
style="display:block;width:425px;height:300px">
<!-- .. with a splash image -->
<img src="http://static.flowplayer.org/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>
<div id="info">
</div>
and script:
$(function(){
var info = document.getElementById("info");
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// this will enable pseudostreaming support
plugins: {
pseudo: { url: 'flowplayer.pseudostreaming-3.2.7.swf' }
},
// listen to following clip events
clip: {
// make this clip use pseudostreaming plugin with "provider" property
provider: 'pseudo',
// all videos under this baseUrl support pseudostreaming on the server side
url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv'
},
onBufferFull: function() {
info.innerHTML += "buffer full<br/>";
}
});
});
See example here