I tried changing the video links from the "Only Dance" page to my video links that I have. I'm using Cloudflare as my CDN to store the videos and received links to the videos from them once I uploaded my MP4 and WebM files. However, the links do not end in ".mp4" or ".webm" they look something like the following:
The video is not playing when I go to the site now, does the URL need to end in ".mp4" or ".webm"? Should I take the code and embed it in my site instead? Or should I use a different CDN altogether?
Thank you for the response. I found out that Cloudflare does not provide direct links to videos, so I switched to AWS Cloudfront. I was able to get the direct video links from them and added them to my "Michigan" portfolio page on my website (https://www.the-routine.co).
However, the video lags quite a bit and it's not a smooth viewing experience. Do you know why this might be occurring? Is there a way to improve playback quality?
Would removing the sound help to improve playback quality? Also, do you have any recommended bitrate or resolution for the video to improve quality on the website? Would transcoding the videos to different formats other than MP4 or WebM help with quality?
I also noticed the video does not play on a mobile device. Is there any way to make the video play on my website when someone views it on their phone?
removing the audio track from the file will reduce its size therefore will improve the streaming speed. the autoplay will work only with muted videos due to autoplay policy implemented in most browsers.
You should keep .webm and .mp4 formats but try using data compression tools like Blazemp and HandBrake to reduce the size of video files without degrading image quality.
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
hard refresh the page (Ctrl+F5) when you are done.
Thank you very much, taking out the audio and shortening my video made a big difference, now it streams just fine on my desktop website! At the very least, I will upload a hero image for mobile, but will try the code you've given me.
I tried making the changes to the code you gave me to get mobile video playback to work. The video worked on mobile, but not in the way I wanted it to. What happens after making the code changes is when someone scrolls to the "Michigan" section on my website (www.the-routine.co), the screen goes black and only shows the video, instead of having the text on top of the video. You can see what's happening in the "Video Playback Error" file I attached. However, I would like what's happening in the "Routine Website_Video Playback_Correct" file to be showing on my mobile site. Is it possible to make code changes to make this work?
I'm using an iPhone. I tried viewing the website on Chrome and it's still not working. I cleared the cache on my phone and still getting the same result.
the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. It's one of the reasons we do not recommend enabling videos on mobile.
I liked online and it looks like you can make this work on iOS devices by adding the "playsinline" attribute tag (see here for more info: https://robsimpson.digital/articles/autoplay-html5-video). Do you know which file I could edit with this tag to make autoplay work on iOS devices? I know this might be new for your team, but any help would be appreciated!
Hello,
I tried changing the video links from the "Only Dance" page to my video links that I have. I'm using Cloudflare as my CDN to store the videos and received links to the videos from them once I uploaded my MP4 and WebM files. However, the links do not end in ".mp4" or ".webm" they look something like the following:
https://watch.cloudflarestream.com/3a06b3d089ee2bb8b3147b7523cec369
The video is not playing when I go to the site now, does the URL need to end in ".mp4" or ".webm"? Should I take the code and embed it in my site instead? Or should I use a different CDN altogether?
Thank you,
Chris
Hi Chris
they should be direct links to the video source files as described by the specs for <video> tag
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
the link you provided points actually to one of their video players. Is it possible to get the direct links from them?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Thank you for the response. I found out that Cloudflare does not provide direct links to videos, so I switched to AWS Cloudfront. I was able to get the direct video links from them and added them to my "Michigan" portfolio page on my website (https://www.the-routine.co).
However, the video lags quite a bit and it's not a smooth viewing experience. Do you know why this might be occurring? Is there a way to improve playback quality?
Thank you,
Chris
Hi Chris,
if i preview the video separately
https://d14xcw7l6mfoph.cloudfront.net/Michigan+Hype+Video_Final.mp4
it has indeed lags - can you talk w/ them to see how you can improve the speed?
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Also I wanted to mention is that you can remove the sound track from the video is the video is muted - if you have not done it already.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Would removing the sound help to improve playback quality? Also, do you have any recommended bitrate or resolution for the video to improve quality on the website? Would transcoding the videos to different formats other than MP4 or WebM help with quality?
I also noticed the video does not play on a mobile device. Is there any way to make the video play on my website when someone views it on their phone?
Thank you,
Chris
Hi Chris,
removing the audio track from the file will reduce its size therefore will improve the streaming speed. the autoplay will work only with muted videos due to autoplay policy implemented in most browsers.
You should keep .webm and .mp4 formats but try using data compression tools like Blazemp and HandBrake to reduce the size of video files without degrading image quality.
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
hard refresh the page (Ctrl+F5) when you are done.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Thank you very much, taking out the audio and shortening my video made a big difference, now it streams just fine on my desktop website! At the very least, I will upload a hero image for mobile, but will try the code you've given me.
Thanks again!
Chris
Ok Chris, this is great news.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
I tried making the changes to the code you gave me to get mobile video playback to work. The video worked on mobile, but not in the way I wanted it to. What happens after making the code changes is when someone scrolls to the "Michigan" section on my website (www.the-routine.co), the screen goes black and only shows the video, instead of having the text on top of the video. You can see what's happening in the "Video Playback Error" file I attached. However, I would like what's happening in the "Routine Website_Video Playback_Correct" file to be showing on my mobile site. Is it possible to make code changes to make this work?
Thank you,
Chris
Hi Chris
what is the mobile device you are testing with. I used samsung android phone and it plays fine.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
I'm using an iPhone. I tried viewing the website on Chrome and it's still not working. I cleared the cache on my phone and still getting the same result.
Thank you,
Chris
Hi Chris
the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. It's one of the reasons we do not recommend enabling videos on mobile.
There is nothing we can do in this regard.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
I liked online and it looks like you can make this work on iOS devices by adding the "playsinline" attribute tag (see here for more info: https://robsimpson.digital/articles/autoplay-html5-video). Do you know which file I could edit with this tag to make autoplay work on iOS devices? I know this might be new for your team, but any help would be appreciated!
Chris
That's right I forgot about the 'playsinline' attribute, thanks Chris.
1. go to showcase-page.php and change line 73 from
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
2. same thing for /sections/hero_section_container.php line 51
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Thank you for your help! This worked but definitely took a while to load. I think I may revert back to the original settings you gave me.
I appreciate your help, thank you again!
Chris
Ok Chris at least you gave it a try.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hi,
Can you tell me what code was above and below the following code block in /js.scripts.js:
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
I want to add these lines back in so my videos don't play when someone goes to my mobile site.
Thank you!
Chris
Hi Chris
the code was between lines 509 and 512 this is the complete section
...
// Video Center on click
$('.video-wrapper').on('click', function() {
var $window = $(window),
$element = $(this),
elementTop = $element.offset().top,
elementHeight = $element.height(),
viewportHeight = $window.height(),
scrollIt = elementTop - ((viewportHeight - elementHeight) / 2);
if ($("body").hasClass("smooth-scroll")) {
var scrollOffset = scrollbar.offset.y + (elementTop - scrollbar.getSize().container.height/2);
TweenLite.to(scrollbar, 0.8, {scrollTo:scrollOffset + elementHeight/2, ease:Power4.easeInOut});
}
else{
$("html, body").animate({ scrollTop: scrollIt }, 350);
}
});
var viewportWidth = $(window).width();
if (viewportWidth < 1024) {
$('.hero-video-wrapper').remove();
}
$('#backtotop').on('click', function() {
if ($("body").hasClass("smooth-scroll")) {
TweenLite.to(scrollbar, 1.5, {scrollTop:0, ease:Power4.easeInOut});
} else {
$("html,body").animate({scrollTop: 0}, 800);
}
});
....
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Great, thank you!