I created my html5 video section, but i'm using it to display video-ads before every video on my page.
The problem is that i want to show the video with only a big play button and the audio button, without the autostart (so the video can be played on every devices).
How to modify it?
My Code:
<video id="advvideo" controls width="100%" height="auto">
<source src="images/videos/promo.mp4" type="video/mp4" >
<source src="images/videos/promo.ogg" type="video/ogg">
video not supported
</video>
you can't control controls attribute of html5 <video> tag to change play button style.
For big play button you can upload your ad in youtube and use that youtube video with object or embed or iframe tag.
I prefer <iframe> tag.
Ex:
<iframe width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>
Related
I'm using Bootstrap 4. My embedded video plays automatically when the page loads. My code is:
<div class="embed-responsive embed-responsive-16by9 hoverable video-1 video-align">
<iframe class="embed-responsive-item" src="myvideo.mp4" allowfullscreen></iframe>
</div>
How do I stop the auto-play, please?
Don't use an iframe; use the video tag. An inline frame is there to display another document on the page and is automatically rendered when the page is loaded. In case of a video, it is automatically played.
You can use the autoplay="false" like this:
<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="myvideo.mp4" autoplay="false">
Your browser does not support the video tag.
</video>
That should be it.
Use this additional parameter for the iframe:
autoplay="false"
I am making a Starbuzz coffee Webpage, in which I am putting some videos. Whenever I come on that page, the video starts automatically. Even without me clicking on the play button. I want the video to only start when the user clicks on the play button.
I use the <video> command.
Basically I want the video to be put in pause by default. I use Google Chrome. Is there a way to do that?
My code is:
<article>
<video controls width="512" height="288" autoplay>
<source src="Starbucks Coffee Perfection.mp4">
<source src="Starbucks Coffee Perfection.webm">
<p>Sorry, your browser doesn't support the video element.</p>
</video>
</article>
How video is been added to website?
If you use <embed> add autoplay="false"
else, if you use <object> add <param name="play" value="false" />
else if it's <iframe> add autoplay=0 to source link of included video
EDIT:
I forgot about <video> :D
If you add video using this tag, delete autoplay parameter.
If you were to upload the video onto youtube and then embed the video from there it does this automatically
Just remove the autoplay
<article>
<video controls width="512" height="288">
<source src="Starbucks Coffee Perfection.mp4">
<source src="Starbucks Coffee Perfection.webm">
<p>Sorry, your browser doesn't support the video element.</p>
</video>
</article>
I have to implement the functionality like http://www.ani-view.com/. i have to play video in UIWebView only but when you click on the video box on UIWebView it will open in Native movie Player (MPMoviePlayer) not in webview video box.
Use the Video tag with this options
<video id="player" class="video" width="80%" height="500px" webkit-playsinline controls autoplay>
<source src="ert.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Is there a way to make just the video clickable to the below code and keep the controls separate?
When I click on one of the controls with the below code it clicks on the link as well.
<video width="300" height="250" controls muted autoplay
onclick='window.open("http://stackoverflow.com/","_blank");'> <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>
Thanks!
I want to play video's using the HTML5 <video> tag and fancybox, with the links directing to youtube videos?
here's my code so far
<video width="480" height="270" controls="controls" poster="../images/youtube-logo.png">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/mp4">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/ogg">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/webm">
Your browser does not support the video tag.
<iframe width="480" height="270" type="application/x-shockwave-flash"
src="http://www.youtube.com/embed/1y8dYlBWOh4?wmode=opaque">
</iframe>
</video>
As you can see i also added an iframe tag to support older browsers.
But after some tweaking i can't get fancybox to open everything, in any of the videos in the video tag??
Thanks in Advance!
The direct YouTube links are 'refreshed', although they work for a moment the next day, they no longer work, cause the links are 'broken'.
the best way to play youtube videos in html5 is like so
<iframe width="480" height="270"
src="http://www.youtube.com/embed/1y8dYlBWOh4?html5=1">
</iframe>
the html5=1 tells Youtube to use html5 to play the videos, and NOT flash!