小编Nat*_*an2的帖子

为iOS5点击启动多个html5-video

我正在处理单击元素时播放不同视频的页面.虽然它在计算机上运行得很漂亮,但iOS设备却没有.问题是当点击元素(在这种情况下是一个按钮)时,它会显示视频但不会开始播放,因为它应该如此.脚本是

$(document).ready(function(){
$('#video_1, #video_2').hide();

      $('.icon_1').click(function(){
            $('#video_2').fadeOut(function(){
            $('#video_1').fadeIn();
            });
      });

      $('.icon_2').click(function(){
            $('#video_1').fadeOut(function(){
            $('#video_2').fadeIn();
            });
        });

$('.icon_1').click(function(){

            $('.video_2').get(0).pause();
            $('.video_2').get(0).currentTime = 0;
            $('.video_1').get(0).play();

        });

$('.icon_2').click(function(){
            $('.video_1').get(0).pause();
            $('.video_1').get(0).currentTime = 0;
            $('.video_2').get(0).play();

        });
          });

Run Code Online (Sandbox Code Playgroud)

和HTML是

<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>

<div id="video_1">
<video class="video_1" width="50%" height="50%"  controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >    
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>

<div id="video_2">
<video class="video_2" width="50%" height="50%"  controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
?</div>

Run Code Online (Sandbox Code Playgroud)

任何人都可以给我一个可以让这种情况发生的功能,那会很棒

javascript video jquery html5 ios5

Nat*_*an2

2012 09-15

6
推荐指数

1
解决办法

508
查看次数

播放视频的进度条

我正在尝试添加一个进度条,显示视频进入其持续时间的距离,但可以放置在视频本身之外(如屏幕的另一部分).我一直在寻找一段时间,并且只找到了显示加载进度的那些,这是我不需要的.任何人都可以帮我找到在哪里找到它,或者甚至自己供应一个.

以防万一需要,这是视频的脚本

var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

            myVideo.load();


    setTimeout(function(){

        myVideo.play();
    }, 200);

Run Code Online (Sandbox Code Playgroud)

javascript video jquery html5 html5-video

Nat*_*an2

2012 05-14

1
推荐指数

1
解决办法

3101
查看次数

代码无法在jsFiddle之外工作

我的目标是创建一个带有交互式视频的网页,在这里搜索时,我发现了一个指向适合我需要的jsFiddle的链接.

由于代码在jsFiddle上工作得很好,当我试图将它复制到DreamWeaver时它崩溃了(似乎JavaScript已停止工作).

我把它们全部放在一起:

<html>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="sgrub.js"></script>
    <script>
        $('#video_1, #video_2').hide();

        $('.icon_1').click(function() {
            $('#video_2').fadeOut(function() {
                $('#video_1').fadeIn();
            });
        });

        $('.icon_2').click(function() {
            $('#video_1').fadeOut(function() {
                $('#video_2').fadeIn();
            });
        });

        $('.icon_1').click(function() {

            $('.video_2').get(0).pause();
            $('.video_2').get(0).currentTime = 0;
            $('.video_1').get(0).play();
        });

        $('.icon_2').click(function() {
            $('.video_1').get(0).pause();
            $('.video_1').get(0).currentTime = 0;
            $('.video_2').get(0).play();
        });

    </script>
    <head></head>
    <body>
        <div class="icon_1" id="mediaplayer">
            cadillac
        </div>
        <div class="icon_2" id="mediaplayer2">
            nike
        </div>
        <div id="video_1">
            <video class="video_1" width="50%" height="50%" controls="controls"
            poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
                <source src="http://video-js.zencoder.com/oceans-clip.mp4"
                type="video/mp4" />
            </video>
        </div>
        <div id="video_2">
            <video class="video_2" width="50%" height="50%" …

Run Code Online (Sandbox Code Playgroud)

html javascript jquery dreamweaver jsfiddle

Nat*_*an2

2012 04-24

-1
推荐指数

1
解决办法

1555
查看次数