javascript - JS window width html5 video element responsive -


alright have been trying lot of different things can't work. asking here.

i have 3 video elements on page. 1 desktop, tablet , smartphone. need remove video elements depending on screen size.

so when screen size < 767: smartphone = visible tablet = removed desktop = removed  screen size >=767 && <980 smartphone = removed tablet = visible desktop = removed  screen size >=980 smartphone = removed tablet = removed desktop = visible

css media queries aint working because video elements keep playing. yes on mobile prevented autoplaying on desktop browser resize plays should not happen. display:none; out of question.

so need create js magic guess. have far trying fill in blank pages can come far did not result in desired effect.

$(document).ready(function () { $(window).resize(function () {     if ($(this).width() < 767)         should write here     else if ($(this).width() >= 767 && $(this).width() < 980)                     should write here                 else if ($(this).width() >= 980)                                 should write here             }); });

http://jsfiddle.net/36unpxj0/2/

in above fiddle can see code entirely , fiddle around it. thank helping.

ps: jquery solutions welcome pure js please tell if js or jquery.

edit 1:

as usual going keep searching , adding info post! found following trick:

$("#video-id").first().attr('src','')

or

$("#video-id").empty().remove();

i tried both no luck: see fiddle http://jsfiddle.net/36unpxj0/3/

edit 2:

alright got answer citizendelta , working in jsfiddle therefore have accepted answer. not working inside joomla website. going keep looking.

here demo, hope, need : demo

steps :

  1. i hide every video (pauseandhideall function)
  2. i detect screen (showthegoodone function)
  3. i show , play video correpsonding

in javascript, have made :

$(document).ready(function () {  function pauseandhide($element) {     $element.get(0).pause();     $element.hide(); }  function showthegoodone() {     if ($(window).width() < 767) {         $('#smartphonevid').show();         $('#smartphonevid').get(0).play();     } else if ($(window).width() >= 767 && $(this).width() < 980)   {         $('#tabletvid').show();         $('#tabletvid').get(0).play();     } else if ($(window).width() >= 980)  {         $('#desktopvid').show();         $('#desktopvid').get(0).play();     }  }  function pauseandhideall() {        $('video').each(function() {         pauseandhide($(this));              });      }  pauseandhideall(); showthegoodone();  $(window).resize(function () {     pauseandhideall();     showthegoodone(); }); });

optionnal improvment :

maybe detect current time of video playing, resume other video time.


Comments

Post a Comment

Popular posts from this blog

android - Pass an Serializable object in AIDL -

i have defined aidl file interface imyfeature { void dotask(class clazz); } but need pass class object process. possible in android? if so, how? i tried: interface imyfeature { serializable class; void dotask(class clazz); } but doesn’t work. aidl in android supports custom class implement parcelable interface. in case want send class object not possible. can send class canonical name , retrieve in service. for example have aidl file interface imyfeature { void dotask(string classname); } then call : binder.dotask(myclass.class.getcanonicalname()); and in service binder stub implementation : private final imyfeature mbinder = new imyfeature.stub() { public void dotask(string classname) { try { class<?> clazz = class.forname(classname); constructor<?> ctor = clazz.getconstructor((class[]) null); object object = ctor.newinstance(); ...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more