When i'm play video which i have locally on my computer like this:
<video id="player">
<source src="/videobox/videos/Mamacita.mp4" type="video/mp4">
</video>
everything works fine.
But when i'm trying to play video from another site like youtube, i'm using absolute url path like this:
<video id="player">
<source src="https://www.youtube.com/embed/ob3ktDxAjWI" type="video/mp4">
</video>
it is not work, how i can play videos not from my computer?
Your YouTube link is not to an MP4 file (or any other video format). It's to a YouTube player that then calls the source video itself.
When embedding a video like this make sure your source is indeed the source. If it doesn't end in ".mp4", ".avi" etc... then it's probably not the source you want.
If you want to embed a YouTube video use this HTML code:
<iframe width="X" height="Y" src="http://www.youtube.com/embed/ob3ktDxAjWI" frameborder="0" allowfullscreen></iframe>
Alternatively you can download the video file from YouTube and host it locally but only do that if it's your video or you have the express permission of whoever's video it is.
You cannot add video from Youtube using <video> tag. In order to do it you should use <iframe>. Your code should look like this:
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="https://www.youtube.com/embed/ob3ktDxAjWI?autoplay=1"
frameborder="0"/>
YouTube videos have very specific ways they allow themselves to be embedded, and the way you are attempting it here is not correct. The embed code you have there does not return a raw .mp4 file, it returns actual HTML structure that the video lives inside. Thus, the <video /> tag has no idea what to do with it. Please use another video source that provides an actual video file to the source attribute and update your question if it still fails.
You cannot do this! If you're using a video from another website you have to use the function
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="https://www.youtube.com/embed/ob3ktDxAjWI?autoplay=1"
frameborder="0"/>
Related
i am trying to create a webpage which other than some other content also includes a video.
because of the reason that i have to append the video url dynamically i am using the <iframe> tag isntead of <video> tag.
it is working fine in chrome and other browser, But when i am checking it on internet explorer(11) the video is getting played on media player. NOT inside the webpage.
i am not using the html <video>. code is something as below.
<iframe class="video-responsive-iframe"
ng-src="http://trinilearn.vo.llnwd.net/o3/RV/RV-10723/05-profile.mp4"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
i am expecting it to open the video in the webpage itself , but it is always opened in the media player.
Try using the video tag instead.
<video class="video-responsive-iframe" src="http://trinilearn.vo.llnwd.net/o3/RV/RV-10723/05-profile.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></video>
I scraped some videos, and displayed them with iframes. That works well, however, I am now looking for a way to control these videos on my react app.
What i mean by control is for instance: pause, play, currentTime in video...etc.
I have tried several things so far.
html5 tags, but it does not work mp4 video link that I have.
A few packages, like jplayer or player.js.
I am pretty sure I can achieve my goal, I guess I just need to find the right tool.
EDIT: Here is a example of my code with video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="https://openload.co/embed/myvideo" type="video/mp4"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
Take a look at video.js. It will give you a complete control over your video playback. Take a look at their advanced examples.
Also, you don't need iframes to work with videos. If that is a design decision then it's fine but you can do video embeds without iframes.
To control video player instance via js refer to following
JS
var myPlayer = videojs('example_video_1');
HTML
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video>
Then you can control the player instance like following
myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);
Please look at the player API in the following link
https://docs.videojs.com/docs/api/player.html
Please look at react component implementation in the following link
https://docs.videojs.com/tutorial-react.html
I saw a question like mine on this page: How to play video from google drive using javascript?
However, I have a question. For some reason, this answer from that question:
Google provides some GET-params like export and id with google-drive:
?export=download&id=YOUR_LONG_VIDEO_ID
to give you the ability to insert an uploaded video into a HTML5-video-tag.
This should work:
$("#play").click(function() {
$("#video")[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Works well when I test it out on the w3schools tryit:
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
I switched that code for my code, I just use it as my practice area.
But when I place my own video in with the same formula, just switching the original google drive video with my own, my video controls are greyed out and clearly can not play the video. My original video is uploaded on my google photos, put in a named folder on my google drive, where both folder and video are open to anyone with the link access.
I don't understand why the original video works fine, and mine doesn't. It's frustrating because I know using this way of putting a google drive video into the video tag allows me to use my custom controls to control the video. But something is going on with my video for some reason.
Here is my code with the original one, you'll see it's the same.
$("#play").click(function() {
$("#video")[0].play();
});
$("#play2").click(function() {
$("#video2")[0].play();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="play" style="margin-top: 300px;">Play</button>
<video id="video" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=0B8-qLYDzDfCyRF9vOE9sWmx5YjA" type='video/mp4'>
Your browser does not support the video tag.
</video>
<br>
<br>
<button id="play2" style="margin-top: 300px;">Play</button>
<video id="video2" width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=download&id=1hLjl0TDEOnPrgXhFxAVNL5fM_qLtCgB9lA" type='video/mp4'>
Your browser does not support the video tag.
</video>
Lots of help will be GREAT!!!!!!!!
According to me, there is permission problem with your drive video.Because I have tried to hit on your link I am getting error of permission. But previous drive's video((working fine)) easily accessible.
Go to your video in Google Drive.
Right-click and select get shareable links, then change your sharing setting to 'On - Public on the Web'.
Refer Image for sharing setting
I am trying to build a feature on my web application that pulls the preview url from Spotify's API, and play the preview when the user clicks on the audio controls. I am able to save the correct URL in the source, but the song does not play. I looked at the MDN Docs, but still could not get it to work. Here is a snippet of my code in JSX:
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p className="font-style">{this.props.songs[2].name}</p>
</div>
I do not receive any errors. Is there anything obvious I am missing? Thank you in advanced!
This should work if you use type="audio/mpeg"
Working example below:
<audio controls="controls">
<source src="https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9?cid=null" type="audio/mpeg"/>
</audio>
For anybody who may find this useful later, I got the audio to work by removing the source tag and putting the preview url directly in the audio tag. Example:
<audio controls src="..."></audio>
I have a parrallax slider, I have put just image and description on slider, and I want to add a video, this is my code:
{ <div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Vidéo PUB</h2>
<p>loading</p> <!--wanna put the video here -->
</div>
<div class="da-slide">
<h2>Affréteurs</h2>
<p></p>
<div class="da-img"><img src="" alt="" /></div>
</div> }
My problem is the video is static.
I'm currently using this slider:
Yii2 Da-Slider
I want to:
Add it to the first slide
Set it so it autoplays
After the video finishes playing I want the slider to automatically resume and move to the next slide.
How can I do this?
I would recommend setting up a YouTube account to host your video on.
If the site is popular then it offloads the strain of serving the video file over to YouTube's fast, dedicated servers.
Once you have got your YouTube video uploaded you can add it to the slide by clicking the Share button beneath the video and then clicking Embed. This will give you a snippet of code like this which you can use in your slider code above:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_dJCLaoBZvM?rel=0" frameborder="0" allowfullscreen></iframe>
Notice the rel=0 on the end. That stops it suggesting other videos once yours has finished playing which makes the whole thing more professional. You can also add autoplay=1 if you want it to start playing straight away. There are also more advanced integrations that you can do where you control the chrome of the video player (the skin around the edge).
I've done this before with parallax and it comes out looking amazing.
I prefer this method to a service like Youtube or Vimeo because you have more control and be able to style it how you want more effectively.
You want to get your video in mp4 and ogg format. You can do this with VLC media player. It's free.
Then I used the html5 <video> tag (Link Here). here is a sample. You will want to style for position, etc... in your CSS.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>