Jquery移动单页应用+视频+动态变化视频 [英] Jquery Mobile single page app + video + dynamic changing video
问题描述
有没有人找到一种强大的方法来动态更改视频元素的来源并使其在Iphone上运行?我的测试在Chrome中运行良好,但我无法使其始终如一地工作。欢迎任何关于策略或玩家的建议,因此它适用于任何设备。
Has anybody found a robust way to change the source of a video element dynamically and make it work on Iphone? My testing works fine in Chrome, but I can not make it work consistently. Any suggestions on strategy or player is welcome, so it will work on any device.
我有一个视频元素:
<video id="player1" width="320" height="240" preload controls>
<source src="http://dev.swinginsam.com/_files/testvid_01.mp4" />
<source src="http://dev.swinginsam.com/_files/testvid_01.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://dev.swinginsam.com/_files/testvid_01.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as
<a href="http://dev.swinginsam.com/_files/testvid_01.mp4">MP4</a>,
<a href="http://dev.swinginsam.com/_files/testvid_01.webm">WebM</a>, or <a href="http://dev.swinginsam.com/_files/testvid_01.ogv">Ogg</a>.</p>
</object>
</video>
以及使用mediaelementjs的播放器初始化代码片段 - 它可以在播放器中运行是正确初始化和剥皮并适用于第一个视频:
And a snippet of code for initalizing the player I use mediaelementjs - it works in the sence that the player is correcly initialized and skinned and works for the first video:
$('#one').live("pageinit", function (event, data) {
var player1 = new MediaElementPlayer('#player1',{});
$('#button1').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_01.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_01.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_01.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
$('#button2').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_02.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_02.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_02.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});
当您按下按钮并开始更改来源时,问题就开始了。它适用于Chrome,但Safari只会继续播放第一个视频。
Problems begin when you press the buttons and begin to change the source. It works in Chrome but Safari just continues to play the first video.
推荐答案
您缺少关闭括号});
为您的 $('#button1')。click(function(){
.javascript应为:
You are missing the closing parenthesis });
for your $('#button1').click(function(){
. The javascript should be :
$('#one').live("pageinit", function(event, data) {
var player1 = new MediaElementPlayer('#player1', {});
$('#button1').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_01.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_01.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_01.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
});
$('#button2').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_02.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_02.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_02.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});
这篇关于Jquery移动单页应用+视频+动态变化视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!