【问题标题】:What is the best way of providing videos on the web that also work on iPhone/iPad?在网络上提供同样适用于 iPhone/iPad 的视频的最佳方式是什么?
【发布时间】:2019-03-24 19:32:13
【问题描述】:

有没有一种通用的方法来实现在 iPhone/iPad 上也可以使用的网络视频?

我的想法是提供两个版本(Flash 和 HTML5)并使用 JavaScript 检查是否支持 HTML5 - 如果支持,则播放 Flash;如果没有,播放 HTML5。也许有更好的方法?

【问题讨论】:

    标签: iphone ios html video


    【解决方案1】:

    深入了解 HTML5 在这里:http://diveintohtml5.ep.io/video.html

    最终的标记使用 HTML5 视频的元素,一个嵌套的 Flash 后备元素, 和一小部分脚本 Android 设备的优势:

    <video id="movie" width="320" height="240" preload controls>
      <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <source src="pr6.mp4" />
      <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://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> 
        <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> 
      </object>
    </video>
    <script>
      var v = document.getElementById("movie");
      v.onclick = function() {
        if (v.paused) {
          v.play();
        } else {
          v.pause();
        }
      };
    </script>
    

    【讨论】:

      【解决方案2】:

      您可以使用 HTML5 video 标签作为默认选项,并在其中放置一个备用object 标签。

      您可以在此处阅读有关 HTML5 video 标签在 Safari(包括移动版 Safari)中的使用情况:https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

      【讨论】:

        【解决方案3】:

        您可以使用此类:MPMoviePlayerController 来展示来自应用的资源包或通过互联网流式传输的视频

        苹果文档:

        http://developer.apple.com/library/ios/#documentation/mediaplayer/reference/MPMoviePlayerController_Class/MPMoviePlayerController/MPMoviePlayerController.html

        【讨论】:

          【解决方案4】:

          我发现这很有帮助:

          http://camendesign.com/code/video_for_everybody

          它使用 HTML5,但无法正常闪烁。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2010-10-10
            • 1970-01-01
            • 2021-06-16
            • 1970-01-01
            • 2011-04-07
            • 1970-01-01
            • 1970-01-01
            • 2020-10-26
            相关资源
            最近更新 更多