Some video sites, like YouTube, provide a way to change the playback speed of the video. This allows you to watch content faster or slower than the standard speed. It is an incredibly useful feature for many people and until earlier this year, I thought it was ubiquitous. I am so used to using it that when I wanted to watch a video and it was not available, I got quite frustrated1.
Thankfully, a colleague showed me that all is not lost and I want to share the magic with you.
Above is the video I wanted to watch (source). It is an interesting video packed with useful information about testing, but it is quite long. I really wanted to watch it, but I did not have a lot of time available, so decided to watch it at a faster speed. However, I could not find a way to adapt the playback speed within the site's user experience. What to do?
In swoops my colleague, via Slack, to remind me that I have browser developer tools at my finger tips, primed to let me make it happen anyway. You can make this happen on the Vimeo site, the TestDouble site, or even here, on my blog.
In the world of HTML5, videos are embedded in pages using the video element. The video element implements the HTMLMediaElement interface (as does the audio element) and if you can get a reference to the video element in JavaScript, you can use this interface to manipulate the video playback.
The first step is getting the element. I did this in Google Chrome, but you should be able to do this in other browsers too, though the commands may be different. I right-clicked on the video and selected Inspect.
This should open the developer tools, with a node highlighted.
As seen in the screenshot above, the highlighted node was not the video element. Initially, I looked at the sibling elements and expanded likely candidates until I found the video tag I wanted, but there is an easier way. Use the Find command within the Elements tab of the Chrome developer tools by pressing ⌘+F (probably Ctrl+F on Windows).
Within the find bar, you can type <video and it will find the first video element in the page and, if there are more, allow you to cycle through any others until you get to the one you want. You can even tell if it is the one you want or not as both the node and the corresponding video are highlighted as seen in the screenshot below.
With the video element found, we can right click the DOM node in the developer tools and select Store as global variable.
This creates a global variable that we can use to manipulate the element. The console section is opened to show us the created variable and the element to which it refers.
Now we can use the variable (temp1 in this case) to adjust the playback rate (or anything else we wanted to do). For example, if we want to run at double speed, just change playbackRate to 2 by entering temp1.playbackRate = 2.
And that's it. Hit play on that video and it will now be running at twice normal speed. Want it to run at half speed instead? Set playbackRate to 0.5 instead. Want it to run at normal speed again? Just set playbackRate to 1.
I hope y'all find this as helpful as I have and next time you stumble because a common feature appears to be lacking, don't be afraid to crack open those developer tools and see what magical hackery you can perform.
At the end of last month I attended the Automotive Megatrends 2012 held at The Henry in Dearborn, MI. Though this was a three-day event, I attended the second day only: Connectivity. It was an opportunity for major and minor players in the automotive world to present and discuss their particular visions of the future for passenger cars in a world that is increasingly connected. Particular attention was paid to the Cloud and the continuing trend for infotainment1 to be provided via handheld devices rather than proprietary in-vehicle systems. Safety was a hot topic; in particular driver distraction, where legislation tends to hold vehicle manufacturers liable in the event of an accident even though they may have little or no control over the devices that do the distracting (such as smartphones).
The day was split into four main sessions divided by networking opportunities. Each main session took the form of a panel where four or five panelists would present their views on a particular topic with a moderator overseeing the discussion. Each panel would face a round of questions once all had presented. The topic of the first two sessions was "Connected vehicle outlook — the next 10 years" with the following sessions being "Mobile device integration" and "Software and apps" respectively. Repeatedly during the day, speakers would return to the concept of the Connected Vehicle and what that means for consumers and manufacturers alike, but what do they mean by "The Connected Vehicle"?
A Day in the Life
You wake up on a cold, wintry morning to your smartphone alarm obnoxiously wailing. Via the magic of the Internet, the home management app has checked the local weather and adjusted your home heating to give you an extra bit of toasty warmth. It has also instructed your coffee machine to brew up some Joe.
You flip to the appropriate smartphone screen and start your car. A quick swipe and the in-car temperature is set just right. An alert tells you a service is due and shows you local service locations along with their cost. You select your favourite location and choose an appointment time, then you swap over to your home management app and start the shower. By the time you're out of bed, showered, dressed and have your coffee in hand, the car is thawed out and toasty warm.
As you drive to work by way of your children's daycare, information is delivered to you via your smartphone to your in-car video and audio systems, telling you the weather, headlines, social media updates and to-do list for the day. Your favourite music plays in the background as you choose. Perhaps you even queued up some things from the night before. Voice commands and a simple, radio-like interface give you simple, non-distracting control of your information streams. Everything coordinates and cooperates to ensure that you can concentrate on driving.
As you're finishing off a quick check of your e-mail subject lines an alert flashes up warning you of road construction and traffic delays. The satellite navigation app on your smartphone kicks in, offering alternative routes and travel times to get you on your way. As you begin your detour, the directional microphones and image processing systems in the back seat detect that your kid just woke up and has started punching his sibling. In an attempt to keep the peace, the latest, greatest animated movie immediately starts streaming from Netflix, Hulu or Zune in the headrest display. Meanwhile, your satellite navigation is suggesting spots to safely pull over (as well as one or two doughnut shops you might need for the purchase of "behave yourself" bribes).
Having dropped the kids off at daycare, you pull up at work and apply the parking brake. The in-car systems take the opportunity to remind you of your service appointment. You get out of the car and walk to your office – the car automatically turns off and locks itself as you go. When you get to your desk, you computer has already synced with the Cloud, showing your service appointment on your calendar along with a snapshot of your car diagnostics, should you need to discuss the appointment over the phone.
Reality Check
Though embellished with a few ideas of my own, this scenario is similar to many involving the connected vehicle envisaged by those presenting at the conference. It is all so seductively plausible that it's easy to ignore the reality. Behind all the enthusiastic rhetoric there are so many unresolved problems and challenges that we're just not ready yet to deliver the dream of the connected vehicle. To get an idea of where we are right now, consider the current vehicle to be akin to video-game consoles just over 10 years ago. Before the current generation of consoles (Playstation 3, XBOX 360, Nintendo Wii), pretty much all you could do with a gaming console was play games, now we can not only play games, but also buy games, rent, buy and stream video, listen to Internet radio stations, watch live television (in HD) and interact with social networks.
The problems for the connected vehicle mostly lie in the gap between the old and the new; passenger cars, with a development cycle of 3-4 years and consumer electronics, with a development cycle of 12-18 months. In a world where a smartphone can be out-of-date within a year but a car is expected to last ten or more, bridging the gap becomes a challenge. Not to mention that the world of the connected car relies on the existence of wireless carriers and services that not only support the demands of consumers but also those of the equipment manufacturers, services like OnStar and its soon to be released API, requiring access to vehicle data and systems in a safe and secure manner.
Controlled Openness
To bridge the development cycle gap, there was a call for the end of proprietary infotainment systems and more controlled, open standards across the passenger car industry. The general view was that proprietary systems have to go in favour of smartphone or other smart device apps, a trend that has already begun. This move would help to reign in the growing concerns surrounding driver distraction by providing an in-vehicle delivery platform that allows apps to interact with the car and its passengers in a safe, secure and reliable manner.
In order to make such a platform appealing to app developers, a set of open standards needs to be adopted by the industry, a set of standards that has not yet been defined but that will provide rules and guidance on how an app interacts with a vehicle and its occupants (as with any new technology discussion of 2012, whispers of HTML5 were everywhere). This idea of controlling app delivery within the vehicle while allowing open standards and app development was dubbed "controlled openness" and clear comparisons were drawn with Apple and the way they govern the app marketplace.
Safe and Secure
Just like the API provided by Apple and any other contemporary development platform, security is extremely important. Security is the basis of trust for consumers and without it the full potential of a technology can never be realised as no one will ever immerse themselves fully. Several presenters gave their thoughts on how security might work but there was a lack of convincing argument that this was a simple problem to solve. In fact most speakers on the matter seemed to be plugging a product while skirting around some of the issues that had been raised by others. Issues that have names like "virus", "hacker" and "theft"; the connected vehicle opens up a cornucopia of problems that must be resolved.
How do you stop someone taking control of your vehicle while allowing you to remote start it from your phone?
How do you allow an app access to vehicle systems without allowing a bug to cause a vehicle accident?
How do you ensure that a person's identification is unpaired from a vehicle when they are no longer in possession of that vehicle due to sale, accident or theft?
Given the need to exchange data to and from the vehicle communications network in order to support telematics and other advanced (perhaps premium) apps, which may include the ability to do things like start, stop or even track the vehicle, I'm sure you can think of many other scenarios that highlight how important it is that the connected vehicle be secure.
The Internet and our increasingly connected world has security all over the place with a plethora of approaches to providing identification, authorization and secure access. However, the effects of a hack or security flaw have so far not had such potentially immediate fatal results as they might in the world of the connected vehicle. A security breach that allows someone to take control of some aspect of your car is entirely unacceptable. This is not a case of making sure it should never happen, but rather a case of could never happen. If nothing else, the experience of driving a car must be safe, both actually and perceptually.
The Road Ahead
So where does that leave us? The automotive industry has rightly identified a need to integrate more closely with the consumer electronics world and move away from the proprietary in-car infotainment systems of old, but the consumer electronics industry is racing along at quite a pace. Although the concept of a smartphone existed prior to its announcement, the launch of the iPhone five years ago accelerated smartphone evolution and it shows no signs of slowing down. However, until the iPhone of the connected vehicle concept appears and focuses consumer expectations, we will have to accept the Windows Mobile-style missteps along the way2.
While the connected vehicle is still an uncertain concept, it is becoming a reality and it will change the way we interact with our cars. In fact, they may not be our cars at all3. The speakers at the Automotive Megatrends 2012 event had plenty of statistics, ideas and products to illuminate the target that is the connected vehicle. Now all we need to do is find the road that takes us there.
Infotainment is a word used in the automotive industry to refer to the combined provision of information and entertainment services within a vehicle such as radio and satellite navigation [↩]
Not to be confused with Windows Phone 7 (or 7.5), which is awesome. [↩]
Uncertainty exists on how various facets of the connected vehicle will be monetized; from the services and apps to the car itself. Will it be subscription-based, ad-supported or freemium? Will we buy our cars or enter into a service-agreement instead? All of these things and more are yet to be determined. [↩]
I went to CodeMash this year. I was one of the 1200 (or 1300 and something, after speakers and other people were counted). It was my first time attending this community-organised conference and I had a thoroughly enjoyable time. I would show you pictures but I neglected to take any as I was having far too good a time to remember that I'd brought a camera.
My wife and I1 arrived at the venue, the Kalahari Waterpark and Resort on Tuesday, the day before everything started with Wednesday's pre-compiler. Tuesday evening was spent meeting fellow mashers in the two resort bars, but ultimately led to a rocky start to Wednesday (breakfast was scheduled for 7am but I had forgotten to schedule bedtime accordingly).
My improvisation when the coffee cups ran out
At every meal during CodeMash, I enjoyed great food, nerdy conversation and copious quantities of caffeinated beverages with some fascinating people. Most of the time I dined with people I had never met, being sure to introduce myself and making a concerted effort to remember names (though, alas, I forgot a few). Although the pre-compiler day was overshadowed by a number of beverage-related issues varying from no coffee to no Mountain Dew to lots of coffee but no coffee cups (I improvised2), the remainder of the conference catering seemed to go without a hitch. This was in no doubt thanks to the CodeMash organizers and the amazing Kalahari staff.
Every evening after the sessions ended, a copious number of tempting options were available from the game rooms where D&D, poker and various other pastimes were enjoyed to Open Spaces3, from the bars, restaurants and water park to panel discussions. Attendees and CodeMash organizers alike would advertise a plethora of options to while away the hours until sleep was the only option. I was so exhausted after CodeMash that I slept for nearly a day when I got home.
What about the sessions themselves?
Wednesday
Going Independent
I'm not going independent, at least not anytime soon, but considering I have worked with many who are self-employed and might consider it for myself one day, it seemed prudent to learn more. Michael Eaton (@mjeaton) was the speaker for this session. He drew from personal experience and the experiences of those he knew (some of whom provided their own anecdotes) to outline the common practices and pitfalls that beset anyone trying to go it alone.
Michael's conversational style provided a great start to the conference and the information presented gave me a fresh perspective on the overhead, sales and productivity concerns of a business owner (apparently, if you manage 30 billable hours per week, you're doing well). Even for someone under full-time employment like me, it provided useful details that will help me to continue supporting those who employ me.
HTML5 is here, and the Web will never be the same
Wednesday afternoon was spent with Brandon Sartrom (@BrandonSatrom) and Clark Sell (@csell5) learning all about markup, behavior and presentation with HTML5, javascript and CSS3. I am not a web developer, my acquaintance with HTML and its supporting technologies would probably make a professional sob, but this lab on the latest and greatest was fantastic. Each area of the HTML5 offering was presented with hands-on labs to sink ones teeth into. There was so much to cover that eventually time fell short, but I still have the labs on my desktop and be assured, I intend to complete them. This was a great stuff and the session so popular that we had to move rooms about an hour in. Apparently, this web stuff is a big deal. Who knew?
Thursday
Unlike the pre-compiler format of half-day and full-day workshops and discussions, the remainder of the conference was split into concurrent hour long presentations, open spaces, gaming and other activities. The sheer number of distractions was sometimes overwhelming, making the act of choosing a distraction in itself to the point where a couple of times, I gave up and just took an hour long break.
On Thursday, we had our first keynote speech, Rethinking Enterprise, while munching away at the remnants of breakfast. The speaker, Ted Neward, had an energy that made sure everyone was awake. Although Ted's presentation style was ultimately controversial, I felt the points he made were valid, well thought out and thoroughly enjoyable to learn.
From the keynote, I swiftly headed to see the popular double-act of Jon Skeet(@jonskeet) and Bill Wagner (@billwagner) presenting C# async inside and out. It was a packed out double session. Some only turned up for the much more complicated second session and I'm sure probably left very confused and scared of both C# and async. However, I loved it. Not only did I witness Jon Skeet's passion for C# first hand, but I also learned a lot (a useful mutable struct?).
After the Skeet/Wagner show, I took a break to check on my wife and make sure she was having a good time. I actually had to persuade her to make an appointment in the spa as she was perfectly happy eating homemade gumbo and watching bad daytime TV in the hotel room. Once I'd convinced her to spend some money in the spa (what did I do?!), I headed back down to learn about usability testing with Carol Smith (@carologic), attended a vendor session from Robert Half Technology, and then headed to David Giard (@DavidGiard) and his presentation on data visualization.
I have to say that while I enjoyed all the talks and workshops I attended, David Giard's presentation on data visualization was by far in the top two sessions I attended. Not only did Mr. Giard give a great talk while very much under the weather, but the examples of good and bad data visualizations he presented were useful and clear. I came away with a new found appreciation for graphs and charts, and a new found skepticism of those who create them and their motives.
Thursday was rounded out by dinner, the hilarious Pecha Kucha competition, live music, impromptu free beer in one of the hotel rooms and a late night water park party just for CodeMash attendees. At least, those were the things I attended; as always there was far more going on elsewhere in the resort if one was so inclined to attend.
Friday
Friday started slow. The night had once again taken it's toll but breakfast was thankfully an hour later, which helped. I skipped the first session, opting instead to wander the vendor stands and show my appreciation for their support.
My first session of the day was Dealing with Information Overload delivered by Scott Hanselman. I really wanted to catch one of Scott's two presentations as I had seen him present at the San Francisco StackOverflow DevDays and really enjoyed his presentation style. Just as at DevDays in 2009, Scott gave a very enjoyable presentation packed with useful, necessary tips, tricks and lessons in how to deal with information and stay productive. I have already started to fold some of the techniques into my working day and intend to continue. Along with the Data Visualization presentation from Thursday, Dealing with Information Overload was in my top two talks of the conference.
Lunch followed with our second keynote speech, How We Got Here, And What To Do About It presented by Barry Hawkins. The keynote was excellent and the presenter only went up in my estimation when we spoke and I learned he was both an anglophile and a thoroughly nice chap4.
As lunch digested, I rounded out the conference with some C# Stunt Coding from Bill Wagner (and a little Jon Skeet when he got up to refactor Bill's code; thoroughly entertaining) and some applied F# from the crazy-shirted Gary Short (@garyshort). Both of these talks were wonderful and gave me some inspiration for some crazy and not so crazy things to try in the near future (both code- and fashion-based).
Friday night's raffle was entertaining, but I didn't win so I'm not saying anymore about it. I'm not bitter, but seriously, didn't win. I did, however, win a book from O'Reilly (@oreillymedia) just for singing a couple of lines to a song. O'Reilly had a large collection of books with them on their vendor booth and gave them all away to anyone willing to sing on video. I haven't seen that video surface yet, but I'm sure it will. Still, I now have a spanking new copy of Programming Android and they're not getting it back if they decide they don't like my pipes (but seriously, thanks for the book).
The End
Jafar hamming it up for the camera while the wife and I pose
And that was that. There was more partying and water park fun but the mashing was over. My wife and I enjoyed the remainder of our stay, including a few photos with Jafar, the Bengal tiger and then travelled home to pass out and catch up on sleep.
Congratulations to all who helped put this together and a hearty thanks to all the folks (speakers, staff, attendees and Jafar) that made my CodeMash experience. It was such a wonderful event to have been a part of and I hope I am fortunate enough to get a ticket next year.
Yes, I took the missus. While I was learning and networking and totally not eating too much bacon or drinking, she was cooing at a Bengal Tiger cub or doing spa type things. [↩]
Open Spaces are free-form discussions on topics suggested by attendees where an open exchange of ideas, experiences, tips and other things can occur. [↩]
My assessment and conclusion of the latter was in no way swayed by learning the former…I swear. [↩]
