Tizen 中的 HTML5 视频元素非常慢（三星智能电视开发）答案

【问题标题】：HTML5 video element extremely slow in Tizen (Samsung Smart-Tv development)Tizen 中的 HTML5 视频元素非常慢（三星智能电视开发）
【发布时间】：2019-10-02 02:04:46
【问题描述】：

我最近开始在 Tizen 环境和 SDK 中进行编程，我正在尝试创建一个（三星）智能电视应用程序，它采用 mp4 媒体链接并以视频播放器的形式显示这些链接，问题是每当我使用 html5 视频标签时，应用程序需要很长时间（2-4 分钟）才能加载，而且很多时候它甚至根本没有加载。

代码已经在 JsFiddle 和本地测试过，在那里运行良好，但每当我尝试在 Tizen 项目（在三星电视模拟器中运行）的 index.html 中执行相同的代码时，它都会显示我刚刚解释的行为（极慢/崩溃）。

以下是我尝试过的一些示例：

<html>
    <head>
        <link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">
    </head>

    <body>
        <video id='my-video' class='video-js' controls preload='auto' 
        width='640' height='264'
        poster="download.jpg" data-setup='{}'>
            <source src='sample.mp4' type='video/mp4'>
            <p class='vjs-no-js'>
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
           </p>
       </video>
       <script src='https://vjs.zencdn.net/7.5.4/video.js'></script>
   </body>
</html>

我也试过不使用video-js，我试过只用video元素，结果一样，有时能用，有时不能用，什么时候能用，得等很久实际加载。根据文档，支持 HTML5，并且他们发布的指南甚至“鼓励”使用 video 标签。我也尝试过使用 javascript 生成 HTML 并尝试让它像那样工作，但没有运气。

【问题讨论】：

为什么需要 video.js 脚本？删除它，然后重试...
@burakk 如果你想看全文，我特别说“我也试过不使用video-js，我试过只使用video元素”
当您使用 Tizen 开发项目时，他们是否有一个实施示例。假设它们比微软更符合标准可能并不安全。 videojs 可用于允许使用 Http Live Stream 协议的 rtmp 编码视频在视频标签中工作...stackoverflow.com/questions/5858936/html5-live-streaming。 ...浏览器不会看到可能会进入电视的 rtmp 提要
添加桌面浏览器不直接支持 rtmp 编码的视频 - 如果他们这样做会很好，因为如果他们支持，您可以将智能手机视频流式传输到本地 html5 视频标签...... rtmp 是缺少寻找能力；这是由 youtube 等服务器解决的，将视频分成小视频，每个视频都在其中播放，浏览器不需要等待整个文件......就像你所描述的那样。好像您的模拟器正在模拟 HLS（http 实时流）。在播放缓冲区中的视频部分并请求 mor 之前，模拟器似乎期待 EOF

标签： html html5-video tizen samsung-smart-tv tizen-web-app

【解决方案1】：

可能是模拟器、编解码器等的视频标签实现。我假设您无法在实际的 Tizen TV 设备上测试代码，所以我建议先添加事件侦听器，然后看看发生了什么试试AVPlay API，我建议在你的应用中实现它。

<body>
 <video id='video' width='700' height='400'
   poster='yourPosterURI' src='yourVideoURI'
   controls style='background:black'>
 </video>
</body>    


var videoElement = document.getElementById('video');

videoElement.addEventListener('loadeddata', function() {
   console.log('Video loaded.');
});

videoElement.addEventListener('timeupdate', function() {
   console.log('Current time: ' + videoElement.currentTime);
});

videoElement.addEventListener('seeked', function() {
    console.log('Seek operation completed.');
    videoElement.play();
});

videoElement.addEventListener('stalled', function() {
    console.log('Video stalled.');
});

videoElement.addEventListener('ended', function() {
    console.log('Video ended.');
});

【讨论】：