Tweet
Hi Steve & Pat. This may not be the best place for this post, but having it visible to the main forum may be of use to certain users.
I've noticed that certain ways of showing MP4 video clips can be a bit hit or miss. If anyone has access to available web space, then this method may help. It consists of uploading your MP4 to a specific web location, and then creating a HTML file that links and runs the video.
While it may be easier to upload direct to the forum or even link to a youtube or video clip, or a number of other methods. Sometimes it may be preferential or necessary to link to a file that you want to play 'as is'.
Below is a bit of HTML that will trigger and control an MP4 clip using HTML5 commands. This works really for me, and I've not come across a browser that wont play it, and it works well on portable devices.
There are other HTML5 video commands that can embellish the playback, and you can also get fancy on backgrounds/colours etc. But for something simple, this works well.
Just cut and paste the following text into a text editor.
<video controls="controls" autoplay="autoplay" width="1280" height="720">
<source src="VIDEO_URL_GOES_HERE" type="video/mp4" />
</video>
<p>
<strong>Click full screen to view the video in 1080
</p>
After you have uploaded your MP4 file to a known URL location, simply copy its URL location, and replace the text VIDEO_URL_GOES_HERE with your MP4 URL location. Making sure to stay within the speech marks "_" and the full path to the video file is correct with the .mp4 extension.
Once you are happy that the text file is all good, save it as index.html Using index as the name of the .html file, will mean that your web address/URL/location will automatically launch.
For instance.
You have placed your index.html file in the URL/location http://www.YourSite.com/VideoSomething Then there is no need to say http://www.YourSite.com/VideoSomething/index.html As index.html is universally recognised by all browsers as the object you want to launch.
You can of course use a specific name for your .html file. This is useful if you have a number of .html files within a certain URL/location folder, where an index.html file would over ride all other .html files in that URL/location folder.
For instance.
You may want to call your .html file Example1.html as you may have a number of examples in one URL/location folder. This would then become http://www.YourSite.com/VideoSomething/Example1.html
Be aware that all text after the .com or other TDLs, such as .net .co.uk etc. are case sensitive, as is the name of your .mp4 file.
I'm not big on HTML, but hopefully the following explanations may help with understanding what the file is doing. Hopefully :) I understand that these commands are for use with HTML5 browsers. In any event, most modern browsers should be fine.
controls="controls"
This tells the browser to use a transport bar, for interaction with playback.
autoplay="autoplay"
This tells the browser to autoplay the video. Although this may not work on certain mobile browsers/mobile devices, such as the ipad.
width="1280" height="720">
This tells the browser what size to open the video. Sometimes it's best to use a smaller size than the actual video size. As for instance, opening a 1080 video at the right size, may be too big for certain devices. I tend to use 720, and the client can choose to go 1080 if they wish.
<source src="XXXXXXXXXXXXXXXXX" type="video/mp4"
This tells the browser where to find the MP4 video file. Again, make sure that the information here is correct to the actual MP4 location, and bear in mind case sensitivity.
<strong>Click full screen to view the video in 1080
This is just a message to tell the client that they can view full screen. Strong, just tells the browser to write the following text in bold.
For the MP4 encoding, I personally use HandBrake. As it has the option of "Web Optimisation" which helps with streaming. Here is an explanation of the function. As it uses X264 for the encoding, it can create excellent low bitrate files, as does most other encoders using X264. Or you can use whatever encoder you are comfortable with.
Others on the forum will have a better understanding of HTML. Please add any extra help, hints or corrections.
Cheers,
Dave.
I've noticed that certain ways of showing MP4 video clips can be a bit hit or miss. If anyone has access to available web space, then this method may help. It consists of uploading your MP4 to a specific web location, and then creating a HTML file that links and runs the video.
While it may be easier to upload direct to the forum or even link to a youtube or video clip, or a number of other methods. Sometimes it may be preferential or necessary to link to a file that you want to play 'as is'.
Below is a bit of HTML that will trigger and control an MP4 clip using HTML5 commands. This works really for me, and I've not come across a browser that wont play it, and it works well on portable devices.
There are other HTML5 video commands that can embellish the playback, and you can also get fancy on backgrounds/colours etc. But for something simple, this works well.
Just cut and paste the following text into a text editor.
<video controls="controls" autoplay="autoplay" width="1280" height="720">
<source src="VIDEO_URL_GOES_HERE" type="video/mp4" />
</video>
<p>
<strong>Click full screen to view the video in 1080
</p>
After you have uploaded your MP4 file to a known URL location, simply copy its URL location, and replace the text VIDEO_URL_GOES_HERE with your MP4 URL location. Making sure to stay within the speech marks "_" and the full path to the video file is correct with the .mp4 extension.
Once you are happy that the text file is all good, save it as index.html Using index as the name of the .html file, will mean that your web address/URL/location will automatically launch.
For instance.
You have placed your index.html file in the URL/location http://www.YourSite.com/VideoSomething Then there is no need to say http://www.YourSite.com/VideoSomething/index.html As index.html is universally recognised by all browsers as the object you want to launch.
You can of course use a specific name for your .html file. This is useful if you have a number of .html files within a certain URL/location folder, where an index.html file would over ride all other .html files in that URL/location folder.
For instance.
You may want to call your .html file Example1.html as you may have a number of examples in one URL/location folder. This would then become http://www.YourSite.com/VideoSomething/Example1.html
Be aware that all text after the .com or other TDLs, such as .net .co.uk etc. are case sensitive, as is the name of your .mp4 file.
I'm not big on HTML, but hopefully the following explanations may help with understanding what the file is doing. Hopefully :) I understand that these commands are for use with HTML5 browsers. In any event, most modern browsers should be fine.
controls="controls"
This tells the browser to use a transport bar, for interaction with playback.
autoplay="autoplay"
This tells the browser to autoplay the video. Although this may not work on certain mobile browsers/mobile devices, such as the ipad.
width="1280" height="720">
This tells the browser what size to open the video. Sometimes it's best to use a smaller size than the actual video size. As for instance, opening a 1080 video at the right size, may be too big for certain devices. I tend to use 720, and the client can choose to go 1080 if they wish.
<source src="XXXXXXXXXXXXXXXXX" type="video/mp4"
This tells the browser where to find the MP4 video file. Again, make sure that the information here is correct to the actual MP4 location, and bear in mind case sensitivity.
<strong>Click full screen to view the video in 1080
This is just a message to tell the client that they can view full screen. Strong, just tells the browser to write the following text in bold.
For the MP4 encoding, I personally use HandBrake. As it has the option of "Web Optimisation" which helps with streaming. Here is an explanation of the function. As it uses X264 for the encoding, it can create excellent low bitrate files, as does most other encoders using X264. Or you can use whatever encoder you are comfortable with.
Others on the forum will have a better understanding of HTML. Please add any extra help, hints or corrections.
Cheers,
Dave.