Video linked by URL instead of local or Youtube/Vimeo

At the moment we can either stream video through Youtube/Vimeo or add locally. I’d like an option where we can add a simple URL, which might be a video within a folder on the website or indeed another website. Possibly even though a source like Amazon S3.

The video can then be uploaded separately via FTP, but I can see various advantages with this option.

2 Likes

I am currently using two different approaches to do this. The first option is to use an HTML Widget and the second is to use a reference video file.

Example 1:
Enter the following code snippet into the HTML widget…

<video width="100%" height="100%" poster="http://ituned.walker4.me/img/GG2.jpg" controls="">
<source src="http://movietrailers.apple.com/movies/marvel/guardians-of-the-galaxy-vol-2/guardians-of-the-galaxy-vol-2-trailer-2_h720p.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

In the above case, “video” and “/video” entries initiate and terminate an HTML5 video code segment. The “width=” and “Height=” code elements set video display scaling as a percentage within the browser’s current total display window allocation. The “img=” code segment points to an image to be used as the video player’s “poster” frame. (In this case, I used a project image already stored as a project asset. Normally relative addressing would be used here but I used absolute addressing to maintain external functionality. NOTE: for best results, poster image should have the same dimensions/aspect ratio as the sourced video file display.) The “controls=” code segment tells the browser to display the default video controls. The “src=” code segment points to the absolute URL of an external video URL or the relative URL of a video file stored locally on your website. (In this example it points to the external URL for an Apple movie trailer.) The “type=” code segment tells the browser that the MOV file contains MPEG-4 audio/video data. And the last text line included in the code is an error trap indicating the browser does not support HTML5 video playback.

Example 2:
In this example, I made a reference video pointing to a video file already stored on a server as depicted below…


In this case the reference file is only 185 bytes but points to more than 100 MBs of audio and video data on the Internet. If you then change the MOV extension to MP4, the file can then be imported and used like any “small” standalone MP4 video asset in the Blocs app.

1 Like

Old topic but still a feature I need for posting several dozens of videos ranging from 2.5 to 4.5 hours in length. However, when I recently tried using the Blocs v3.1.2 HTML Widget bric to insert code based on the Video bric, I ran into a new problem. When I inserted following code into the widget editor:

<div class="embed-responsive embed-responsive-4by3 ">
<video class="embed-responsive-item" poster="img/09CCIS.jpg" controls="controls" data-src="Video/09CCIS.m4v" >
Your browser does not support HTML5 video.
</video>
</div>

This is the HTML code that was generated:

<div class="embed-responsive embed-responsive-4by3 ">
<video class="embed-responsive-item lazyload" poster="img/09CCIS.jpg" controls="controls" data-src="img/lazyload-ph.png" data-src="Video/09CCIS.m4v" >
Your browser does not support HTML5 video.
</video>
</div>

Which, for some unknown reason, included this little gem of extraneous code between the poster image reference and the video URL reference that breaks proper playback of the URL referenced video:

data-src="img/lazyload-ph.png"

However, if I manually delete this code tidbit from the webpage HTML file, then the video plays normally as originally expected. Unfortunately, each time I use the “File > Export > Quick Export” option to publish the project to my MacMini server, the unwanted code is re-inserted back into the file and must again be purged. Is this a bug or am I doing something wrong?

Thanks, @JayWalker for taking the time to explain this. It was really easy to understand.

I think this is fundamentally the reason why Google doesn’t index images or video if lazyloading is enabled in Blocs. Everything stops at that lazyload-ph.png file. It would be good to report this as a bug. Google lists methods that don’t cause this problem.

https://developers.google.com/search/docs/guides/lazy-loading

1 Like

Somebody wrote something about that issue when you are working with code widget. Try to make the preview off.

56

I also read the “Shenanigans” post and so “Preview” was turned off when I ran the tests. My question is primarily an attempt to determine if entry of the problematic additional code is a bug in Blocs 3 or if the app is programmed to do this for some specific, albeit unknown to me, reason. As previously indicated, my code is based on the Video tag code generated by the Blocs 3 Video bric as depicted here:

<video class="embed-responsive-item lazyload" poster="img/02TBC.jpg" controls="controls" data-src="vid/02TBC%20copy.mp4">
Your browser does not support HTML5 video.
</video>

When I compared the output of the Video and HTML Widget brics, I noted this difference in the code generated for the webpage and decided to manually remove the offending “data-src” reference that, as mentioned above, appears to break Video tag processing. Not being a web programmer, I do not understand what, if any, of the HTML Widget code is generating the additional unneeded/unwanted code and is the primary reason I used a functional approach to locate the problem. Currently in the process of documenting this problem in minor detail for SJAUG (South Jersey Apple User Group) members who may be interested in using Blocs as an alternative to other, more traditional design applications. Just wanted to know if this was an easily fixed bug or intentional function within Blocs. For any who may be interested, have added a rendering comparison of unpurged and purged code on my TEST website that mentions this problem to fellow group members.

1 Like

Thanks for the link. Will see what I can learn further about this topic a bit later today after reviewing current recommended bug reporting procedures.

In the event anyone else needs to add further information regarding this or other code fragment issues, a formal Bug Report has been sent.

Follow-up for the benefit of any interested Blocs users:
Apparently it took Norm less time to troubleshoot the original problem than it took me to realize how to the fix issues created by Norm’s simple solution—i.e., to simply disable the '“Lazy Loading” option in the “File > Export > Export Project > Export Settings” window. Once this is done, the new setting is “remembered” when you next use the “File > Export > Quick Export” option and continues to prevent generation of the offending code. Unfortunately, he neglected to realize and/or point out that this also disabled use of “embed-responsive” code previously copied from the Video bric webpage HTML file output (with “lazy Loading” enabled) to the HTML Widget. Once this code was also removed, the videos played correctly using URL references in the HTML Widget.

@JayWalker
Could you please explain how you created a mere 512 byte “reference video” (which is basically a URL pointer) as per your comment below? I’ve spent the last half hour in vain Googling “reference video” and “reference MOV,” not finding a single clue.

Like @Flashman I too want the right sidebar VIDEO controls improved such that I can just paste in a URL. Why? Because I have a Japanese and English version of my website, and sometimes people who visit one page will switch to the other, and it makes no sense for me to put two separate /vid directories on my server with two separate links to video files when 1 video should suffice.

I added the following JS code on my English web page (which is inside a /en directory) to swap out the /en/vid/ URL with a /vid URL, and that code works, but sadly using it kills HTTPS (no lock icon) in the browser:

<script>
$("video[data-src='vid/myvideo.mp4']").attr('data-src', 'http://mydomain.com/vid/myvideo.mp4')
</script>

For now, I am using the following .htaccess code to do a server level redirect. So even though I don’t even have a “mydomain.com/en/vid” directory, calls to it by my English web page will redirect and open the mp4 file inside my “mydomain.com/vid” directory.

RewriteRule ^en/vid/myvid.mp4$ https://mydomain.com/vid/myvid.mp4 [R=301,L]

Thanks,

James

I’m probably missing something here - to be quite honest, I never really understood the initial post in this thread and changing file names. Whenever I want to embed something like a self-hosted video or a powerpoint/keynote Presentation, I use the standard video bric and select YouTube/Vimeo option. I then edit the source URL to point to the file on my server. This now becomes a reference link and doesn’t require embedding videos into the Blocs project.

The alternative is to simply add your remotely hosted videos to the asset manager like this:

You can then use the local/remote option in your video bric and select the remotely hosted video from the asset manager. Whichever way you do it, the video bric will simply display your content in a responsive iFrame - it won’t actually add the video to your project and will not, therefore, create a video directory in your site. Both of these options remove the issue of multiple video directories - a single video url can be shared between a number of sites.

Not sure why placing assets in different folders on your web server should cause security certificate issues. Most SSL certificates cover the entire domain including its sub folders. If you think about it, loading images from an images sub folder doesn’t create an SSL issue - neither should a video, whether it’s in an en subfolder or in the root of the main domain.

If you want to try it out to check what happens with your security certificate, add the following URL to your hosted assets and then add the asset to a video bric set to Local / Remote.

https://totrb.sibccapital.com/vid/riverbank.mp4

You should find that the video clip displays in your page, but when you export, there will not be a vid folder in the output.

1 Like

@hendon52
Doesn’t work well for me. I see this strangeness in the right sidebar:

It’s shifted to the right in Blocs’ preview:

And I get a teensy tiny thumbnail in Safari with AutoPlay off:

All said. It’s a no-go.

CODE:
<iframe class="embed-responsive-item" src="https://kiramek.com/vid/VSC86.mp4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

@JDW I think this is an issue with the actual video. I downloaded the video and ran it through Handbrake. I chose a preset (Fast 720p30). I then uploaded it to my server at the URL below:

https://totrb.sibccapital.com/vid/VSC86.mp4

Try the above link in your blocs page to see what you get.

I then added that URL as a local asset. I added a video bric and selected local/hosted and chose the asset from the asset manager. Just to check everything, I also uploaded the original video file as VSC86original.mp4. And added that to the page as a vimeo/youtube url. . You can see the result below.

The re-coded file displays perfectly (top video) whilst the original video (bottom video) displays the problem you’re seeing. I suggest you may like to re-code your video files - maybe there is something about the original encoding software that’s messing things up.

Thank you for the extensive testing. I sincerely appreciate your kindness.

The video is 24p, edited with FCPX and exported via Compressor. 24p is not only standard for cinema, it also keeps the file size smaller than 30p if you maintain the same level of video quality. The export from FCPX to Compressor was 720p (24p) and the export from Compressor was H.264 (24p). There is no audio track, but I doubt that is the issue.

My .htaccess redirect hack is working fine with my 24p video, so I will stick with that since it affords me 24p rather than 30p. Again, the purpose of my .htaccess hack is to allow me to put 1 instance of the video on my server, in the /vid directory for my primary Japanese language site, then have my English version web page redirect and grab that video instead of forcing me to put 2 instances of the same video on my server.

By the way, if you’ve figured out how to defer loading of YouTube JS, please share the secret! It’s a non-issue for local video like we are discussing, but YT JS is nevertheless a video-related concern.

I see the space saving of 24p - it’s about a 0.2mb difference. so well worth getting that right. Regarding the multiple video thing, I don’t think it really needs the hack. By creating a hosted asset the file never gets uploaded - it’s simply a pointer to your video file regardless of which version of your site you’re working on. I tend to create a common assets folder in the root of a domain for things like video on multilingual sites, and haven’t had an issue with multiple instances of video files. Each language version just points to the same file. I understand, however, that it creates a security certificate problem for you. Again, I don’t actually understand why that should be the case. My host provides a security certificate for the entire domain and it’s sub-folders. I thought that was standard, but clearly I’m wrong.

I’m not too sure about the deferred JS loading thing - I’m a bit of a noob when it comes to technical stuff. However, I do know that in handbrake you can select the “web Optimized” option for loading videos which means the video doesn’t download in its entirety when the page loads - it tends to download as the video starts streaming. Of course, YouTube is a whole different ball game. I don’t think they offer too many options on how their videos download. But, I could be wrong - maybe someone who is more into youtube stuff will come along and correct me.