I am embedding .mov file in the webpage using following HTML code
<embed border="1"
autoplay="false"
cache="false"
loop="false"
setcontrollervisible="true"
scale="tofit"
src="movie.mov"
controller="true"
qtsrc="movie.mov"
type="video/quicktime">
</embed>
In this case the video is first totally downloaded and then played in browser. Forsome videos size is around 100MB and so it takes huge amount of time to first download and then play.
Is there any way to force browser to only stream video and not to download and play?
I found the solution. It was issue with my video file.
"The MOOV atom, an important piece of metadata needed to make it progressively playable, was located at the end of the file. It needed to be at the beginning".
I used "qt-faststart" program to arrange atoms and it is working.
Related
I am updating my existing web application code from Flash <object> to now using HTML5's <video> and <EMBED> tags instead.
I have a situation to use my own Flash player which has its own complete player controls for playing the video. Because it is important to make sure that, across the web page, the same design view should be there.
I have created a sample test page also and tried it. Here i can solve either one solution only.
Solution 1:
<div id="blk-1" class="toHide" style="float: none; vertical-align:middle">
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="https://ins-trs.com/tracker/webapplication/data/videos/Japan.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
</div>
-- Here the controls for the video is default of HTML5 and it works.
Solution 2:
<div id="blk-6" class="toHide" style="float: none; vertical-align:middle">
<embed src="https://ins-trs.com/tracker/webapplication/data/videos/Mouseover.swf"
width="640" height="360"
type="application/x-shockwave-flash">
</div>
-- Here .swf file run with out control buttons to handle the video.
Solution3:
<div id="blk-7" class="toHide" style="float: none; vertical-align:middle">
<object width="640" height="360"
type="application/x-shockwave-flash"
data="https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf">
<embed src="https://ins-trs.com/tracker/webapplication/data/videos/Mouseover.swf"
width="640" height="360" >
</object>
</div>
-- Here "video_player.swf" player loads in the screen, but " Mouseover.swf" video is not loaded inside my player after long time and no error also.
My Question is,
Is it possible (Solution1)to tell of HTML file to load via my "https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf" player fpr .MP4 files to load?
How to enable or set the player buttons for the .swf extension video which is running in solution2 above?
How to load the .swf video inside my custom own player(solution3)?
Attached as image my own custom player with controls -- (https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf)
I hope some would come across these situation. It will be great help for me to understand more and update my knowledge.
Thank you for your time reading my question.
Image for your reference of 2 players , i would like to achieve either one for across all the pages similar look for all my videos .mp4 or .swf in my web application.
Custom .swf player look
Default HTML5 player look
You cannot use the SWF as a graphical user interface for the <video> tag.
Also not all browsers will display SWF files, so if you do this, you might have some users seeing no controls on the screen (especially on mobile devices).
It's a simple fix: Just use JavaScript to control playback.
You have to recreate (or extract) the SWF icons (as PNG images) and load into your page.
Assign JS functions to each image for controlling playback (eg: play video on image-1 click).
If you need it, check tutorials for the math calculations of...
seek bar handling (graphic click position converts into video seek position).
time display (converting milliseconds into hours, minutes or seconds).
The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.
I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.
Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):
<!DOCTYPE html>
<html lang='en'>
<body>
<video controls src='vid1.mp4' width='500'>
</video>
<video controls width='500'>
<source src='vid2.mp4' type='video/mp4' />
</video>
</body>
</html>
Am I missing something obvious?
[1]: https://i.stack.imgur.com/qAl7D.png
EDIT:
When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.
I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.
Why are these HTML5 video problems cropping up now after 5+ years?
TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.
Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.
My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.
Screenshot of the case of the missing HTML5 video volume button:
The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.
And yes, the chrome flags for new media player are disabled:
What it looked like before, what I expect to see:
The stripped down code I'm using:
This code was evolved from the likes of: http://camendesign.com/code/video_for_everybody
<html><body>
<video width="640"
preload="none"
height="360"
poster="some_content.png"
controls="controls">
<source src="some_content.mp4"
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=_
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br>
MPEG4
Ogg Theora
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
</body></html>
The above code is the code that used to work, but got broken.
Final solution that worked for me: Manual clean of the 3rd party taint from my MP4 videos.
There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.
I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.
Other solutions considered, but rejected:
Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
Use a different browser or an open source browser, that know how to do the right thing.
Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
Yield the vanguard and eyeball click revenue to the big player content providers, just use an whatever tag to redirect users to the websites who are able to show video correctly.
The game is afoot make your time.
It seems that you are using a mute video. Because of that, the volume control is not showing.
Check this out:
<video src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
I have an HTML5 audio source defined as follows:
<audio>
<source src="../audio/segment.mp3" type="audio/mpeg" />
<source src="../audio/segment.wav" type="audio/wav" />
</audio>
The .mp3 is there for other browsers, and is expected to fail. The .wav file used to work without issue, but now does not. I have tried going over FF change logs and havent found anything in the latest releases. I am using FF 20 on Windows, and the error i receive now is:
"Media resource http://website.com/segment.wav could not be decoded"
If i throw the .wav URL in to the address bar FF will play the file without issue.
Note that at time of writing FireFox won't play 24bit .wav files. Convert them to 16 bit and they'll be happy.
I just faced this exact situation: the WAV file plays when loaded directly in Firefox, but not in an <audio> element. The problem for me was that the 44-byte header of my WAV files was invalid. After ensuring that the file length, byte rate, and block align were correct, I was able to play them just fine.
Here's the description of the WAV header specification that I used: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/.
I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.
In my company we link our site to videos provided by a partner company. They changed their video encoding from .FLV to .MP4 videos and the current video player on our site doesn't playe them. We changed it to Windows Media Player given that most of our customers are running windows and internet explorer, the embed code we used is this one:
<object>
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="VideoPlayer" ShowStatusBar="false"
EnableContextMenu="false" autostart="true"
width="426" height="285" loop="false"
src=[video_url] />
</object>
I see the WMPlayer displayed on the site and the video plays, but my clients only see the player displayed and the video doesn't play. We updated our clients flash plugin and still nothing. What could be the problem?
You need to install additional codecs on the client machine. There are numerous codec packs for that (search google). You can't do it automatically from a browser either as it requires an installer to run.
WMP is a pretty crappy solution anyways since you're basically screwing over anyone who visits your site with a Mac or Linux computer. There are numerous other ways to play MP4 including via Flash but also using new HTML5 features.
We ended up using Flow Player