I've a got a problem when I'd like to embed a YouTube video on my expo application, when I click on the play button, I sometimes get this message :
For example, when I posted this video on reddit, it played perfectly through their youtube embedded player.
I use this sample of code:
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://www.youtube.com/embed/bo_efYhYU2A?rel=0&autoplay=0&showinfo=0&controls=0'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
I know for a fact that the video is allowed to be embedded because when it's not the case, I get a different error message which allows me to open the video on youtube :
Here is a link to test it : https://snack.expo.io/#maxgfr/youtube-embedded
Any help would be greatly appreciated
Maxime
Edit : example of url which doesn't work https://www.youtube.com/embed/8GaWM2a3FAc
To solve this problem :
I create a web application which loads a youtube video thanks to the video ID. My endpoint is something like that : https://mywebsite.com/ID_VIDEO_YOUTUBE
Then in my react native application, I just have to load the URL of my website :
<WebView
useWebKit={true}
ref={(ref) => { this.videoPlayer = ref;}}
source={{uri: 'https://mywebsite.com/ID_VIDEO_YOUTUBE'}}
scrollEnabled={false}
domStorageEnabled={true}
javaScriptEnabled={true}
/>
Edit : Here is the sample of code that I use in my Vue JS application
<template>
<div style="position: fixed;overflow-y: hidden;overflow-x: hidden;width:100%;height:100%;">
<iframe style="width:100%;height:100%;" :src="'https://www.youtube.com/embed/'+this.$route.params.id+'?&autoplay=1&playsinline=1'" autoplay="1" playsinline="1" frameborder="0" scrolling="no" allow="playsinline; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</template>
<script>
export default {
name: 'youtube',
head: {
link: [{
r: 'icon',
h: '/static/favicon.png',
t: 'image/png'
}]
}
}
</script>
Related
So here is the point. I have some files downloaded on my device. Because can be video,mp3 or pdf, it can be nice to display it on a webview so its preview system will do the work for me, and I have no necessity to download any external media player.
I have this code
let's assume that this path:
const path = 'file:///Users/MyUser/Library/Developer/CoreSimulator/Devices/D18AD5B6-22D1-4F57-A162-8A1C5DBCAD7A/data/Containers/Data/Application/BF9347EB-8EDF-45CB-9CFD-08C0C8BE3D5C/Documents/song.mp3';
<WebView
javaScriptEnabled
source={{ uri: path }}
style={{ marginTop: 0 }}
/>
My problem is when I'm trying to load the file, it always raise this error:
I suspect it's about the route of the uri. With require It renders an error as well ( module cannot be resolved).
This app is just for Ios, not Android.
Any help will be really appreciate!
Thanks in advance
I got it!!!
It was rough but finally, I get it.
I did it with a webview finally. What I did:
<WebView source={{ html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>` }} />
With this one, thanks to #marx_tseng I injected HTML on the webview, so I took advantage of the media player from the browser.
I had to load the video/image/mp3 from the bundle.js.It is loading previous when you invoke a webview. In this example, I use RNFetchBlob just to point to the folder that my documents are stored inside my device.
const html = `<script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,</Webview>
Finally, this is the code result:
const html = `<script
src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script> `;
<WebView
source={{ baseUrl: RNFetchBlob.fs.dirs.DocumentDir, html,
html: `<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video
</video>
</body>
</html>`
}}
/>
Here #plougsgaard Provided with this solution.
https://github.com/wkh237/react-native-fetch-blob/issues/197
I hope that this answer can help if someone is stuck in the same situation.
Cheers!
You cannot play video in webview. please use npm packages like react-native-video it will help you to play videos with more controls
this maybe help you, using html video/audio tag
I'm looking to embed a YouTube video into an XPage, probably into a repeat control. I've looked around but can't find anything specific to XPages. I can create a link to open the YouTube video but that just moves them to YouTube but I don't want to leave my site.
Does someone have an example of how to do this.
Use the HTML <iframe>, <object> or <embed> tag to insert YouTube videos into your XPage repeat control.
Example:
<xp:repeat
id="repeat1"
rows="30"
var="video"
indexVar="number">
<xp:this.value><![CDATA[#{javascript:
[ "http://www.youtube.com/embed/XMoTb1iep48",
"http://www.youtube.com/embed/lvs3vpmEKHg",
"http://www.youtube.com/embed/63lYaeOJZOA",
"http://www.youtube.com/embed/6D6PzLSlEsQ"
]
}]]></xp:this.value>
<iframe
width="400"
height="250"
style="margin:2em"
src="#{video}"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
<xp:text
rendered="#{javascript:(number + 1) % 2 == 0}">
<br />
</xp:text>
</xp:repeat>
Make sure you use http://www.youtube.com/embed/YOUR_VIDEO_ID as URL.
A detailed description you can find here.
You need to follow instructions and put a short snippet anywhere in the XPage. Something like:
<iframe title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="http://www.youtube.com/embed/-X2zNe3YFNM"
frameborder="0" allowFullScreen></iframe>
With too many rows in your repeat you can expect lots of iframe reloads on every refresh.
I'm taking my first step with learning the YouTube api.
Here's my html:
<iframe width="640" height="360" src="//www.youtube.com/v/FLMpFXUZOs4?version=3&enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe>
And here's my JavaScript:
function onYouTubePlayerReady() {
alert('yay!')
}
onYouTubePlayerReady is not firing.
I tried to save it in jsFiddle, but I don't see a Save button.
I only see a "Run", "Debug on mobile", "Tidyup", "JSHint" and "Collaboration" button.
I've got a youtube video that renders ok using object embed, in all browsers except ipad, here's the code:
<object id="ytViewer" width="468" height="327" type="application/x-shockwave-flash" data="http://www.youtube.com/apiplayer?version=3&enablejsapi=1&version=3&playerapiid=ytViewer" state="0" mute="0">
<param name="allowScriptAccess" value="always">
<param name="autoplay" value="0">
<param name="WMode" value="Opaque">
</object>
I'm using object embed, as I've made some custom player controls in javascript, which don't work when I use an iframe to embed the video.
It uses some javascript to pull the video in, but is it because ipad does'nt support flash embed?
Update:
function loadPlayer( divToLoad, plId, vidid) {
var params = {
allowScriptAccess: "always",
autoplay: 0
};
var atts = {
id: plId
};
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&version=3&playerapiid=" + plId, divToLoad, "468", "327", "9", null, null, params, atts);
swfobject.createCSS("#" + plId, "display:block");
$('#' + plId + '_container').attr('videoid', vidid);
}
So I need to get the function above to add the embed tag, not sure how to do that.
Thanks
Your code only links to the YT flash video player (not even pointing to a video).
Why not just use the automatically generated "share" code of YouTube?
Look out for the "embed" button in the "share" section right below your video and copy the default code. You can even activate some additional options:
<iframe width="560" height="315" src="http://www.youtube.com/embed/KVHO-FWuMXs" frameborder="0" allowfullscreen></iframe>
This should work for all browsers.
Edit:
if you need the object/param syntax, you can switch to the "old" way of embedding videos: the (currently fourth) option can be ticked to use this deprecated code:
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Test it with this music video from Psy:
http://www.youtube.com/watch?v=KVHO-FWuMXs
I am using a Twitter Bootstrap Modal and Youtube Video on the same page. I am facing Z-Index Problem where the Video is being displayed above the modal window in Chrome Browser.
How can i solve this issue ?
http://mink7.com/projects/cmrc/home.html
You should use YouTube urls with ?wmode=transparent param.
<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>
If you include your object/embed tag then you should add <param name="wmode" value="opaque" /> for object tags, wmode=transparent for embed tags.
The YouTube video you put on your page is flash-based. Flash objects are rendered separately on the top of the window, because they're not the part of HTML5 stack. Z-index has no effect on these.
See e.g. http://www.google.com/search?q=flash+z-index
As suggested by Fatih, solution is to pass wmode=transparent. For the IFrame API, I used following:
var player = new YT.Player(pContainer, {
height: 300,
width: 400,
videoId: contentID,
playerVars : {wmode: "transparent"},
events: {
...
}
}
});
you can easily fix this.
USE:
<param name="wmode" value="opaque" />
inside object tag.
<object title="YouTube video player" width="480" height="390"
data="http://www.youtube.com/embed/EBSnWlpTPSk"
frameborder="0" wmode="Opaque">
<param name="wmode" value="opaque" />
</object>
OBJECT method is now deprecated:
https://developers.google.com/youtube/player_parameters