相关疑难解决方法(0)

我正在尝试完成一个简单的类似涂鸦的行为,使用html标签点击mp3/ogg声音.它应该可以在Firefox,Safari和Safari iPad下工作.

我已经尝试了很多方法,并且已经归结为:

HTML

    <span id="play-blue-note" class="play blue" ></span>
    <span id="play-green-note" class="play green" ></span>


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="blue.mp3" />
        <source src="blue.ogg" />
        <!-- now include flash fall back -->
    </audio>

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
        <source src="green.mp3" />
        <source src="green.ogg" />
    </audio>

JS

function addSource(elem, path) {
    $('<source>').attr('src', path).appendTo(elem);
}

$(document).ready(function() {


    $('body').delegate('.play', 'click touchstart', function() {
        var clicked = $(this).attr('id').split('-')[1];

        $('#' + clicked + '-note').get(0).play();



    });

});  

你可以在ign.com.uy/loog/看到整个演示

这似乎在Firefox下运行得很好,但是每当你点击时Safari似乎都有延迟,即使你多次点击并且音频文件已加载.在iPad上的Safari上,它几乎无法预测.

此外,当我在本地测试时,Safari的性能似乎有所改善,我猜测Safari每次都在下载文件.这可能吗？我怎么能避免这个？谢谢!

在iPad(iOS v.5.1.1)上,Safari readyState根据规范不保留视频元素的值.即使从视频源加载readyState等于零.

我做了一个演示jsfiddle,不断检查视频readyState.一个有趣的观察:readyState只有在点击播放按钮后才能进行更改.

实际上,我希望readyState在加载过程中切换到更高的数字(就像我测试的桌面上的所有浏览器一样 - 包括Safari.)是否有解决方法？我在这里弄错了吗？

我正在开发一个显示动画原理图的Web应用程序.

我有一个功能,允许用户在原理图的2D视频和实际系统的3D视频之间切换.这适用于Chrome,IE和Firefox.在运行9.3.1的iPad上,它无法在iOS上运行.这两个视频都由相同的自定义视频控件控制并同时播放,2D视频处于"前"(z-index = 1),3D隐藏在其后面(z-index = 0).当3D开关被击中时,它只是将3D视频更改为z-index = 2.所以没有什么可疯狂的,只是一个CSS技巧.此外,当我使用Mac检查控制台时,它不会抛出任何错误.

这是播放原理图的页面的HTML:

<!-- Establishes the wrapper for all of the content and the angular controller that will control the content -->
<div id="player">
    <video id="vid" onload="logDimensions()" ng-hide="twoDhidden" >
        <source ng-src="{{selected.vidPath}}">
        <track id="trk" ng-src="{{selected.track}}" kind="chapters" default> A browser with <a href="http://www.jwplayer.com/html5/">HTML5 text track support</a> is required.
    </video>
    <video id="vid3D" ng-src="{{selected.vidPath3D}}" ng-hide="threeDhidden">
    </video>
    <span id="videoTime">{{currentTime | timeFilter}} / {{totalTime | timeFilter}}</span>
</div>
<div id="buttons">
    <div id="videoOptions" class="fixed-action-btn vertical click-to-toggle">
        <a class="btn-floating btn-touch blueIcon">
            <i class="medium …