Canvas Support

Video on index and language selector

8 replies·opened Jan 16, 2019
F
funtimerosJan 16, 2019

Hi,
great template we have to questions:

  1. is there a simple way to include a language selector on the page?
  2. on the video that can be placed on the index page how can we offer the possibility to the visitor of choosing if they want sound on it or the dont want sound?

this is the code we have at the moment

                            <div class="video-wrap">
				<video poster="images/videos/bike-emotion-tenerife-poster.jpg" preload="auto" loop autoplay muted>
					<source src='images/videos/bike-emotion-tenerife.mp4' type='video/mp4' />
					<source src='images/videos/bike-emotion-tenerife.webm' type='video/webm' />
				</video>
				<div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"></div>
			</div>

Thanks in advance

F
funtimerosJan 29, 2019

Hi,

still struggling with video on index.

http://ociodinamicomultimedia.es/Maquetas/BET-2019/index.html

at the moment,

  • we can´t have video working with sound, or add in the code an icon to disconnet the sound
  • when looking at the page on a mobile device, the area where the video is located it completely dissapears

just tell us if you need any additional information to help us to solve the issue

Thanks

S
SemiColonWebSTAFFJan 31, 2019

Hello,

  1. Please use the CSS (in the Document Head) and the JS (at the bottom of the Page) Codes from the index-video-sound-event.html Template in the Package/HTML Folder. Additionally, you will also need to add the id="slide-video" Attribute to the <video> Tag along with the #video-slider-mute Element inside the #slider Container as in the Default File.

  2. Simply add the .force-full-screen Class to the .slider-element Container.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

F
funtimerosFeb 1, 2019

Hi again
thanks for your reply

added the css and js from the index-video-sound-event.html
and also the other id and class

and still same problem.

No sound , and when looking at the page in different devices the video still dissapears

this is the new page we configured

http://ociodinamicomultimedia.es/Maquetas/BET-2019/video-test-1.html

maybe we did something wrong with the code but we are completly lost at the moment

Could be easy if we try to place insted of html video on the slider , a video linked from yuotube , that will make the page completly responsive regarding video or in small screens we will not be able to see it as in the computer?

Hope you can help
Thanks

F
funtimerosFeb 11, 2019

Hi againg,
we send a reply more than one wee ago , and still no answer. We copy below the issue

Hi again
thanks for your reply

added the css and js from the index-video-sound-event.html
and also the other id and class

and still same problem.

No sound , and when looking at the page in different devices the video still dissapears

this is the new page we configured

http://ociodinamicomultimedia.es/Maquetas/BET-2019/video-test-1.html

maybe we did something wrong with the code but we are completly lost at the moment

Could be easy if we try to place insted of html video on the slider , a video linked from yuotube , that will make the page completly responsive regarding video or in small screens we will not be able to see it as in the computer?

Hope you can help
Thanks

S
SemiColonWebSTAFFFeb 11, 2019

Hello,

  1. The following code is missing on your Page:
<a href="#" id="video-slider-mute"><i class="icon-line2-volume-2"></i><i class="icon-line2-volume-off"></i></a>

Please make sure each and everything is copied as recommended above so that you don't run into unexpected issues.

  1. The .full-screen Class is missing from the .slider-element Element. Both the .full-screen and .force-full-screen Classes are required for this to work properly.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

F
funtimerosMar 6, 2019

Hi,

we continue with a slight problem with the video on index slider , now when looking at the page in different devices the video still dissapears (we added the force-full-screen you recomemnded), and instead of the video what it is shown in some of them is the image of the video poster. Can we arrange something to see always the video even if it is small but running , than the video poster image ?

the strange thing is that maybe we could understand this could be happening in small devices (some phones) , but it is also ocurring in a samsung galaxy tab A6 . Any idea to solve this ?

this is the code

<section id="slider" class="slider-element full-screen force-full-screen">

		&lt;div class="full-screen force-full-screen dark section nopadding nomargin noborder ohidden"&gt;

			&lt;div class="container clearfix"&gt;
				&lt;div class="slider-caption slider-caption-center"&gt;
					&lt;h2 data-animate="fadeInUp"&gt;  &lt;/h2&gt;
					&lt;p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200"&gt;   &lt;/p&gt;
					
				&lt;/div&gt;
			&lt;/div&gt;
            
            &lt;div class="video-wrap" id="slide-video"&gt;
            	&lt;video poster="images/videos/bike-emotion-tenerife-poster.jpg" preload="auto" loop autoplay muted&gt;
                  &lt;source src='images/videos/bikeintenerife.mp4' id="slide-video" type='video/mp4' /&gt;
                  &lt;source src='images/videos/bikeintenerife.webm' id="slide-video" type='video/webm' /&gt;
                &lt;/video&gt;
				&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"&gt;&lt;/div&gt;
		  &lt;/div&gt;

		&lt;/div&gt;

	&lt;/section&gt;

and this is the page in our server http://ociodinamicomultimedia.es/Maquetas/BET-2019/index.html

Thanks in advance

S
SemiColonWebSTAFFMar 7, 2019

Hello,

Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

We are definitely keeping an eye on the Latest Updates by Apple and Android to allow the auto-playing of HTML5 Videos on their respective phones and as soon as they release an Update we will surely make this available. The HTML5 Video on Mobile Devices do not work on any Website.

Additionally, currently the Video Autoplay is supported only from iOS 10 onwards. You can use the following instructions to make it work on iOS 10 or above devices:

  1. Add the playsinline Attribute to the <video> Tag. Example:
<video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
    ...
</video>
  1. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:
<div class="video-wrap no-placeholder">
    <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
        ...
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

This should definitely work fine. Hope this Helps!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard
Video on index and language selector · Canvas Template Support