I am using HTML5 video tag as below-
<video id="videoPlayerId" controls="controls" />
<button onclick="play()"> Play </button>
And with Javascript-
let player = document.getElementById("videoPlayerId")
this.setAttribute('src', 'https://something.com/srcurl.mp4')
player.preload = 'metadata'
function play () {
player.play()
}
On localhost, the video shows controls bar properly but when the same code is uploaded to the LIVE site, the video doesn't show the control bar in Chrome but control bar looks fine in Firefox. So, what could possibly be going wrong on LIVE site causing Chrome to not display the Controls bar?
Also, when I right click on the video on LIVE site in Chrome, it shows "tick mark" next to "Show Control" option but the bar still doesn't show up.
I have also done research on internet and couldn't find any solution so far. There is only once place where the same problem has been reported on Chrome Developer help centre- https://support.google.com/chrome/thread/18545176?hl=en but unfortunately, there has been no response from Chrome team as well.
Further updates, I noticed that the video bar doesn't show only in Vue JS production mode, the production build is generated by WebPack. However it works fine in Development mode. Does this ring bells in anyone's mind?
Please help! Very thanks in advance.
Related
I am using Ionic on android devices, and there is a tag in the HTML page. When I pushed the fullscreen button to make the video presented in fullscreen mode, there is a obvious flicker in the area of the tag on the device.
During the flicker, I can see the wallpaper of the android phone and the icons of the apps on this device. Is this some issue with the native functions? And I also notice that when the keyboard hide/show a similar problem.
As you can see in the picture, when I am switching to the fullscreen, there is clearly a play button of the native player, after a second or so, the video will be playing.
here are some codes.
<div ng-click="play()" ng-show="showPlay" class="tutorial-play-button"><img src="images/welcomeNote/play.png"></img></div>
<video id='video-widget' autoplay='true' autobuffer controls playsinline poster="null" style="width:100%;">
<source src="{{src}}">
</video>
</div>
This issue is not because of your mentioned code in the post. It might be because you have not handled your out activity action/animation correctly. Same thing will happen even when you launch another activity. There might be snippet of code in your project that is altering default behaviour of activity. You should google Activity Transition and you might have your solution.
I hope this helps.
The cause is the Theme I use. I used a transparent theme in my app. I changed the theme to Theme.Light. It is OK.
I'm using the Angular JS extension angular-translate for language changing in my Cordova hybrid app with Mobile Angular UI.
The problem:
I found that I can't play the videos. And the video control bar is disabled. I looked in the source with Chrome's "Element Inspector" and saw that the file is there in <source>. I tried to copy the fully address and paste in the browser address bar and hit enter and the video started to play there in the browser window. So I know that the source address is the right one.
I realized that it could be a translate problem since I get the filename with translate code. And that is loading after the page is loaded. Then I tried to add translate-compile attribute to the element. Didn't worked.
So. What to do?
Here is the code:
<video controls poster="img/video-posters/{{'view-vid-img' | translate}}"><source src="img/videos/{{'view-vid-nme' | translate}}" type="video/mp4">Video not supported</video>
Edit:
Here is a demo:
https://plnkr.co/edit/ZZPJL1ReOC0ZOz4VI4kU?p=preview
I am creating a video watching system with the HTML5 video tag. I have one problem and I don't know if the problem is because of my code or of Google Chrome.
Everything works fine until I try to drag the timeline bar or volume bar. Can anybody please help me? The problem is that the moment I click and unclick it does not stop dragging the bar around. So when I drag and leave it, it doesn't stop dragging. I have tried everything like clicking around but the only thing that worked was when I reload the page.
My code:
<video controls width="640" height="264" poster=""><source src="uploads/video1.mp4" />To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</video>
I Don't think your code is having any issue, It might be because of the type of mp4 file you are using.
Please use following piece of your code working perfectly fine (I have used different mp4 source file)
<video controls width="320" height="264" poster="">
<source src="http://www.w3schools.com/html/movie.mp4" />
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video
</video>
I refer to the demo code for the YouTube iframe demo located at: https://developers.google.com/youtube/youtube_player_demo. This works perfectly on my desktop and my iPhone, but it will not do so on my iPad in the Safari browser. I obtain a black screen instead. I have modified the code to prevent it auto starting (I have a button now for that). I also write event.target.getPlayerState() to a div on the screen so that I can see what is going on. I wish to use to use the iFrame player and to control it using Javascript.
When it starts up I obtain the still frame from the video (as expected) and the red play button. The getPlayerState() is 5 at this time (video cued). As soon as I hit play the player iframe goes black and the getPlayerState() changes to 3 (buffering). That is it, it will just sit there for hours without change.
I get the same black screen when I try the demo located at: https://developers.google.com/youtube/youtube_player_demo.
I have no difficulty playing a video the YouTube website. Also if I go to any video on the Youtube site and get the iframe embed link then I have no difficulty playing this from a web page. This of course does not have a a Javascript interface.
Has anyone any suggestions? What other info should I provide.
Many thanks.
Peter
This has since fixed itself. But now the demo code will not work on Internet Explorer, the on ready is not firing. There are many posts regarding this on Stackoverflow, but all marked closed. I will investigate further and if necessary open a new post.
I have the page http://video-stock.co.uk setup with 4 videos, all using video.js. It works fine with chrome etc which use the html5 implementation, but when I view in ie7/8 and the flash fallback, the big video and the first of the small videos are fine, but the other 2 small videos are black, and have no play button overlay, and are unresponsive to clicking, although a right-click does bring up the flash context menu.
I have next to no knowledge of working with flash to play videos, except the odd embed in Wordpress, and I was glad to find Video.js to sort all that out for me. All I can see in the code is that the correct video files seem to be getting sent into flash, but maybe it is because the flash player (.swf) file is being called more than once? Just a novice guess. Any help gratefully received.
Edit, for completeness I set up a test for flash on the page in chrome etc - if you go to http://video-stock.co.uk/?flashdefault you can view the page with all players in flash. It works fine on chrome, ff and even IE7+8. To get the flash default I have used:
_V_.options.techOrder = ["flash", html5, "links"];
I will change the default to that order if I receive no replies from you helpful lot.
After the edit I went to the site in IE without the flashdefault query var and all four players were working.
The only thing I changed was adding preload="auto" to the small videos, and that seems to have been the fix. Although it could have been getting the flash videos into the cache using the flashdefault that fixed it, until some new videos are added we won't find out. To Moderators, should I accept this answer now or wait till I know for sure?