Question

因为视频播放器需要时间来加载mp4视频。 HTML5是否支持在加载视频时播放“加载”徽标？

enter image description here

因为我的asp.net应用程序是一个移动页面，它需要用户点击视频才能播放视频（android，iphone不支持自动播放）。这样我就不能将“加载”标识作为海报，否则，用户会对此感到困惑。我想在用户点击iPad上的播放按钮时显示加载徽标。

感谢

乔

Answer 1

我花了太长时间才弄清楚如何做到这一点，但我会在这里分享，因为我终于找到了办法！当你想到它时，这是荒谬的，因为加载是所有视频必须做的事情。您认为在创建html5视频标准时他们会考虑到这一点。

我认为应该有效的原始理论（但不会）是

通过js和css
准备好时播放

简单，对吧？问题是我无法在设置源元素或设置video.src属性时显示背景图像。天才/运气的最后一击就是找出（通过实验）如果将海报设置为某种东西，背景图像将不会消失。我使用的是假海报图片，但我想它可以使用透明的1x1图像（但为什么要担心另一张图像）。所以这可能是一种破解，但它有效，我不必为我的代码添加额外的标记，这意味着它将使用html5视频在我的所有项目中工作。

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS（用JS应用于视频的加载类）

video.loading {
  background: black url(/images/loader.gif) center center no-repeat;
}

JS

  $('#video_id').on('loadstart', function (event) {
    $(this).addClass('loading');
  });
  $('#video_id').on('canplay', function (event) {
    $(this).removeClass('loading');
    $(this).attr('poster', '');
  });

这对我来说非常合适，但只在mac上测试过chrome和safari。如果有人发现错误或改进，请告诉我们！

Answer 2

也是在加载视频时添加预加载器图像的简单解决方案： HTML：

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

海报是透明图像1px。

CSS：

  video {
  background-image: url(images/preload_30x30.gif);
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: center;
  }

Answer 3

使用标签ID海报

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

可以找到更多信息http://www.w3schools.com/html5/att_video_poster.asp

Answer 4

您可以通过创建带有动画“加载”gif的图像叠加来实现JavaScript，只有在视频加载且尚未准备好播放时才会显示。

您必须编写JavaScript以链接Media API以检测视频何时可以播放等等（因此您可以再次隐藏图像），但这应该是可能的。

Answer 5

我的解决方案是在window.fbAsyncInit = function（）中添加以下内容：

var finished_rendering = function() {
    var el = document.querySelector('div#loading_msg');
    el.style.display="none";
}

FB.Event.subscribe('xfbml.render', finished_rendering);

找到：https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

Answer 6

我个人认为，做到这一点的最优雅的方法是使用这样的代码，

    override func viewDidLoad() {
    super.viewDidLoad()

    //Set View controller title here on Navigation bar
    title = "Chat"
    self.tabBarItem.title = ""
    self.navigationController!.tabBarItem.badgeValue = "Online"
    // set the font name, size and color of title of navigation bar here
    self.navigationController?.navigationBar.titleTextAttributes =
        [NSAttributedString.Key.font: UIFont(name: "Hiragino Sans", size: 27)!,
         NSAttributedString.Key.foregroundColor: UIColor(hex: "#7E629F")]

    // Add search bar to the navigation controller here

    if #available(iOS 11.0, *) {
        navigationItem.searchController = searchController
        navigationItem.hidesSearchBarWhenScrolling = false
    } else {
        // Fallback on earlier versions
    }

    searchController.searchResultsUpdater = self
    searchController.dimsBackgroundDuringPresentation = false


    definesPresentationContext = true



    //        loadUsers(filter: "")
}

要使其变得更好，您可以使用<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video> <script type="text/javascript"> //We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer) function hideControls(event){ event.controls=false; } //If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer. function showControls(event){ setTimeout(function(){ event.controls=true; },1000); } </script>而不是ontimeupdate，后者会不断触发。至于延迟时间，实际上对我来说不是1而是4秒。

加载HTML5视频时如何制作加载图片？

6 个答案: