How would I change the embed code for this? I am putting a dance video in a PowerPoint, then I am providing an audio narrative describing what is happening in the video. I want the video to autoplay but at a very reduced volume (20%) or to be muted completely. The owner who gave permission could not find his original video, so I have to use his YouTube version.
Here is the YouTube's embed code:
iframe width="560" height="315" src="https://www.youtube.com/embed/yl1l4-5pU7Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe
I don't know JavaScript or IFrame so I cannot decipher a website that you refer me to... :-(
I have a situation here were I got to click two play buttons on an google drive video embed
This is my code for showing the video
<iframe src="https://drive.google.com/file/d/video_id/preview" width="960" height="540" allowfullscreen="true"></iframe>
After the video is loaded it displays a video thumbnail with play button and then when I click on it, it goes to another play button with a youtube like interface.
How can I get rid of this two play button? I just need one click then video should play after.
You may want to check this thread on how to play video from Drive using JavaScript. It stated that Google provides some GET-params like export and id with google-drive to give you the ability to insert an uploaded video into a HTML5-video-tag.
$("#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>
Check this link for additional information: Get Google drive video embed code using api
I have a thumbnail.jpg hosted on my server, when clicked, open a jQuery lightbox and play YouTube video. However, by this method I need to add &autoplay=1 in the embed code. Or else, users will need to click twice on the same video in order to play.
The problem is, youtube said autoplay doesn't count the view. In my case, user DOES click on the thumbnail image hosted on my server. Is there any suggestion to use the same flow (click –> lightbox) and make YouTube count the view? This video is on top of the sidebar at my website.
I have VideoJS displaying a video in a modal window in a Wordpress website. I'm NOT using a videoJS plugin, I've loaded the latest VideoJS version to the home directory. The code for the video tag is in a separate non-Wordpress html file all on it's own.
The video IS working fine in Safari on the Mac, it's also working fine in Firefox on Windows. It is NOT working properly in Firefox on the Mac.
I have traced this issue back to it being caused by the 'controls' option in the tag. As soon as I change the options to 'autoplay' and take out 'controls', the video plays perfectly well in Firefox and Safari on the Mac.
More specifically it appears to be the small timer (showing how much video has played) on the skin's slider.
The skin in Firefox is different that the one in Safari. The one in Safari is BLACK and displays the time to the left and right of the slider at the bottom of the player. The one in Firefox is GREY and has the time in a small raised box above the slider at the bottom of the player. It is this raised box that seems to be causing an issue with the video playing in Firefox. The video is only playing slowly on a strip just above the slider and only to the height of the timer box.
I have tried putting:
<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
right under the call to
<script src="http://vjs.zencdn.net/c/video.js"></script>
in the head of the Wordpress page that has the modal window displaying the separate html page containing the code.
That did NOT work; both Safari and Firefox still show the controls at the bottom of the player.
I also tried adding:
.vjs-default-skin .vjs-time-controls {display: none !important;}
to my WP theme's stylesheet. That did NOT work either.
QUESTION 1: Why is Firefox using a different skin for VideoJS than Safari? If I can get the same controller for Firefox (ie one without the raised time code box) then the video may play normally.
QUESTION 2: How can I limit the controls to show only the large centred play button without showing the controls at the bottom of the player? Again, not having the raised time code box may make the video display normally in Firefox.
QUESTION 3: All this came about because I discovered iPhone and iPad do not play videos with the autoplay setting. I had originally set the option for autoplay in the tag without 'controls', but because it wasn't working in iPad (just getting a black background to the video) I took out 'autoplay' and added the 'controls'. And that's when I noticed the problem in Firefox. So if I can't fix the issue with having controls in Firefox and it not working, is there a way to get round the black screen issue on the iPad and using 'autoplay' for Firefox without controls?
Please let me know if there's any other information you need.
You shouldn't need the code as it's all working; the problem only arises in Firefox on the Mac when I add 'controls' to the tag. And I'm sure this can be fixed by using a different skin or getting rid of the controls at the bottom of the video (well, I'm hoping that will fix it!).
BTW I'm using this in the head of my WP template
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
Oh, and Firefox is not falling back to the Flash Flowplayer, it's definitely playing the ogg file in the HTML5 video tag.
ctagney, thanks for taking the time to respond.
Question 1
Hmm, strange.
I have this in the header at the moment:
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
This is the code I have in the html page (I've replaced actual domain with ... as I don't want links to the site --- you can see the video on www. horizonyachtsgrenada .com/ new-yacht-sales-grenada/ at the top of the right-hand side bar:
<div style="margin:0; Padding:0;">
<video id="salesvideo" class="video-js vjs-default-skin" preload="auto" controls width="540" height="320"
poster="http://.../videos/horizon-dream-makers-splash.jpg"
data-setup="{}">
<source src="http://.../video/HORIZON_FINAL_HD.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://.../video/HORIZON_FINAL_HD.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://.../video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="540" height="320" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":[http://.../videos/horizon-dream-makers-splash.jpg", {"url": "http://.../video/HORIZON_FINAL_HD.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://.../videos/horizon-dream-makers-splash.jpg" width="540" height="320" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
Any ideas why it's not using the video.js?
Question 2
I've added that code to the page now, so hopefully once it's picking up video.js it will pick this up. I assume I won't need 'controls' in the video tag for this to work, is that correct?
Question 3
So, if I'm understanding your link correctly, I'm right in changing it from autoplay to having controls for it to work on the iPad and iPhone.
New issue:
It's not working in Chrome even though there is a webm version of the video! I'm beginning to go greyer ... just want the video to work now!! :(
Any help much appreciated.
Cheers,
Tracy
EDIT: BTW the video does play on Safari, Firefox, and Chrome on a different site (different server, different video code) so it's not the video itself causing an issue.
The players you're describing in firefox and safari sound like the native video players for each browser. In other words, you're not actually using video.js.
Question 1
Once you get it working, you'll notice that the players should look identical to one another in Safari and Firefox. Without seeing your code it's hard to say why your video.js player isn't getting initialized, but you need to do one of the following:
Include a data-setup='' tag in your video element, which you can use to specify options via a JSON value.
Have a separate script that calls _V_("video id", {}) once the page has loaded.
I recommend you use the second option since you have some additional setup to handle (see: below)
Question 2
The big play button you want is automatically hidden when controls are turned off, so you should just call it's show() method once the video player has been initialized.
<script>
_V_("example", {}, function() { this.bigPlayButton.show(); });
</script>
See the following for a working example.
http://jsbin.com/ijipag/2/edit
Question 3
See Can you autoplay HTML5 videos on the iPad?
The issue was I didn't include the call to the video.js
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
in the separate (non-WP) html page that's shown in the modal (FancyBox iframe) window. I've now included that and it's successfully calling the video.js and showing the big play button without the bottom controls in Safari and Firefox.
It's still NOT working in Chrome. In Chrome, when you click the play button it's just showing the poster image and the spinning loading gif.
UPDATE: Got it working in Chrome by moving :
<source src="http://www.horizonmotoryachts.com/video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
above the calls to the mpeg4 and ogg files.
Tested on Firefox and Safari on Mac and its still working.
The way YouTube recommends you load a video is like so:
<iframe id="ytplayer" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" allowfullscreen>
This loads the video as an iframe so they can detect iOS or other devices and deliver a swf or HTML5 player depending on what's necessary.
These snippets come from their Player API Demo. https://developers.google.com/youtube/youtube_player_demo
Unfortunately, in IE6-9 this causes serious slowdown - the browser seems to freeze up for as much as 5 seconds, even when the player is the only thing on the page and isn't set to autoplay. In addition, there's a touch of irony to this "demo" in that they aren't at all loading the player the way they recommend, and instead loading it via a custom written Google AppEngine/AppSpot app they put together - and it actually does load more performantly in the demo in IE than when one uses Google's recommended snippet.
Have others run into this? Is there a good solution?