Is it good practice to use html5 video players like jplayer in my sencha touch app?
If so, where can we instantiate the player?
Also, where do we write the html code for player? This demo has both the javascript and html part.
References to the third party scripts can be made in app.json file if we used sencha command to deploy. However mine was not that case so adding them in index.html worked fine.
Instantiation of the player can be done anywhere. But to make sure the instantiation was done after the DOM part of the html code was executed, go to the view in which html was written and write the javascript part in a painted function.
Related
I've searched a bit here on SO to find a way to show instagram video using the public api ?__a=1 method. I've found a question that have pointed me into the right direction but not at all.
after I get the user media, I'm checking in my vue app if the resource is a video or an image and if is a video I show an html5 player where I'm binding the url that is obtained form the public json api. What I'm facing is that the player will not reproduce the video, but if I use the url into the browser, an html5 player is loaded with the related video that will start playing.
The video urls returned are something like this one:
"https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
I've tried to remove all the part after the .mp4 file extension but this will not work, so I suspect that all the url is needed. Is there a way that I can use to reproduce video in my app?
After many tryes unfortunately I didn't figured out how to use my own HTML5 player so I've used a simple solution. An <iframe> with the url set will let the vido play into the app, this exclude me from the ability to remove the download button or controls from the player but at the moment it's the only way I can implement to achieve my scope.
(1) Your link works okay for me in a video tag:
<video width="640" height="480" >
<source src="https://scontent-mxp1-1.cdninstagram.com/v/t50.2886-16/117420353_635186773777278_7723572524374891239_n.mp4?_nc_ht=scontent-mxp1-1.cdninstagram.com&_nc_cat=106&_nc_ohc=nI6tYDeag-0AX8MtmoL&oe=5F3C077B&oh=a47046b1aabf223f16c4c66526e20e57"
type="video/mp4">
</video>
(2) It even works okay in this random demo that uses vue.js.
With no demo page of your problem the solution is a guess...
Make sure that your own site URL starts https:// or else change the video src to http://...etc.
Make sure your server (settings?) isn't somehow blocking you from loading the file.
If still failing, show us the problem via some link to your testing page.
I have an embedded HTML5 video which works fine in all browsers (or fails gracefully, if the browser is old or lacks video support). But since my site uses iDangerous Swiper (http://www.idangero.us/sliders/swiper/api.php), the custom video controls - the 'play/pause' button - does not work in Internet Explorer 10.
If I remove the swiper js code embed from the head area of my HTML, the embedded video plays fine in ie10. The problem seems to be that Swiper is intercepting the click on the play button in ie10 - and therefore the solution seems to be to disable Swiper for at least that small area of the page.
But it's not clear how to do it.
There seems to be a very scantly documented new feature in the June 2013 Swiper release which lets one create a 'noSwiping' class, but wrapping the video in a div with this class does not solve the ie10 problem.
Has anyone else needed to disable Swiper for an element and succeeded in doing so, particularly regarding ie...? I would be very glad to see a code example. My own project is still on localhost.
All you have to do is to add the html5=1 in the src attribute of the iframe :
The video will be displayed as HTML5 if available, or fallback into flash player.
you can read this:
Force HTML5 youtube video
I had a problem with a embed video of youtube inside a dangerous swiper, but the solution of TSL works for me!
I had added the html5=1 and solve my problem!
thanks!
I am planning to build a system to broadcast public events (trials, meetings, conferences).
A key request will be the insertion of live subtitles to the A/V stream.
The subtitles will be "live" since they will be produced by an operator while the event will happen.
I suppose the HTML5 "track" element is not yet implemented by any of the major browsers, but: can I expect to eventually use it for live subtitles? Will I be able to inject the subtitle to the page while the stream is playing?
Please Look at the following links. Looking at the link i am having to believe it should be possible as they are using Js to show subtitles
http://www.storiesinflight.com/js_videosub/
http://cuepoint.org/
You may also consider http://mozillapopcorn.org/ which is to show content on timing of the video. So technically u can use this with ajax to show/stream subtitles
There are HTML5 video JS libs that support subtitles (eg: VideoJS supports the .srt format, there are several easily Google-able others), however to the best of my knowledge none of them support streaming subtitles.
I think you may have to build your own solution for this. If I were to do it, I'd probably try doing something with Socket.IO's broadcast functionality that can push data out to all connected clients at once, and have your client-side JS listen for new subtitle events and render them on screen as they come in. You can use plain ol' CSS to overlay the text over the HTML5 video.
The jQuery VideoControl is documented here:
https://developers.google.com/tv/web/lib/jquery/#gtv.jq.VideoControl
It takes a set of VideoParms. That are not specified.
It is used in the sample templates on this page:
https://developers.google.com/tv/web/docs/gtv-templates
I've taken apart the templates, but I'm having difficulty creating a simple example of a standalone video control. In the templates, the sidenav and carousel code are tied to how the videocontrol works. There is a relationship between the keyController and behavior (behaviorZones) that I can not find an explanation for.
Is there a standalone example somewhere? What needs to be setup with keycontroller, css, and behavior to get this going?
I'm not aware that there is a standalone videocontrol.js sample but it should be possible to set it up. Most of the necessary pieces are inside videocontrol.js, in particular in the videocontrol's constructor and this function: gtv.jq.VideoControl.prototype.makeControl.
keycontroller mapping is used to handling key inputs and some of the CSS are dynamically controlled within JS so there might be errors if you just rip them apart straight from the Template. You'd have to debug it using a solid tool like Chrome Developer Tools. You can watch tutorials of this tool here: http://www.youtube.com/results?search_query=chrome+developer+tools&oq=chrome+develop&aq=0&aqi=g3g-m2&aql=&gs_sm=3&gs_upl=1972l4015l0l6142l14l11l0l0l0l0l207l1476l3.5.3l11l0
Otherwise please send your error traces and/or code snippet for debugging help.
S
If I wanted to create a mobile app that allows the user to take pictures with their phone, record audio notes and record video, how would I do that?
I was browsing through the Sencha Touch 2 API and while I see documentation on video and audio files, it seems like it is just providing a way for me to access files stored on the phone - not actual triggers to record, or take pictures.
Am I missing something?
How would I do what I want?
In order for Sencha Touch to have access to your phone capabilities, you need to use a product like Phone Gap
Unless there is a HTML5 api for doing those sorts of things I don't think you can do that. I know on PhoneGap there are native extensions added into that platform for access to things like microphone, camera, etc. I don't know if Sencha Touch has added any of those sorts of extensions in order for you do this.
Just thinking out of the box here, but you might be able to put Sencha javascript into a Web View from within an Android Java process. Then the Java code could expose an object in its process as an extension point to the Javascript engine for access to Camera, Microphone, what not.