Using the HTML5 <video> tag, the video plays when the image is clicked in iOS 7 and below, but in iOS 8.1 it plays when the app starts -
i implementing video feature in application using html5 <video> tag. want video play when image clicked. it's working in versions ios 7, in ios 8.1, video starts playing automatically after app initialization
i implemented following way:
<div style="margin-top:40px;"> <img src="images/play-video-screen.jpg" onclick="video()" value="loading video...." /> </div> <div> <video controls autoplay="true" id="welcomevideo" src="video.mp4" style="display:none;width:2px"> <source type="video/mp4" > </video> </div> <script> function video() { document.getelementbyid('welcomevideo').style.display="block"; var videoel = document.getelementsbytagname('video')[0]; var sourceel = videoel.getelementsbytagname('source')[0]; sourceel.src = 'video.mp4'; videoel.load(); } </script>
if remove autoplay="true"
, video doesn't play @ all, when image clicked.
as matt gibson wrote, may want brush on html video , audio. places start:
mozilla developer network - using html5 audio , video
safari developer library - ios specific considerations
(my rep isn't high enough post more 2 links, google search "html video tag" more.)
as code: there few things going on here want change work properly. of these not necessary working, more style advice.
starting @ top:
- set id image file container.
- set explicit width , height values (based on video file's dimensions) video container. (these can set in js using videoel.setattribute("width","___px") , videoel.setattribute("height","___px") if size variable video video.)
- remove autoplay property , width style declaration.
- set variables in js each of elements you're touching; image container, video, , source elements. -- note i've called var once in function. video element 1 "need" for, calling other elements once each, find practice define them in own variables, in case decide manipulate of these elements later. also, getelementbyid 1 of fastest methods can use grab elements dom, use when can.
- .load() video did, .play() it.
your code should resemble following:
<div id="videoimg" style="margin-top:40px;"> <img src="images/play-video-screen.jpg" onclick="video()" value="loading video...." /> </div> <div> <video width="620" height="465" controls id="welcomevideo" style="display:none;"> <source id="video1" type="video/mp4"> </video> </div> <script> function video() { var videoel = document.getelementbyid('welcomevideo'), sourceel = document.getelementbyid('video1'), videoimg = document.getelementbyid('videoimg'); videoimg.style.display="none"; videoel.style.display="block"; sourceel.src = 'video.mp4'; videoel.load(); videoel.play(); } </script>
tested on ipad(3) running ios7.1.2. should work in ios8 fine.
Comments
Post a Comment