HTML5 视频问题

发布于 2024-12-27 15:16:41 字数 1053 浏览 0 评论 0原文

尝试在我的网站上获取优质的 html5 视频。以下是在本地观察到的问题和观察结果：

在 Firefox 中 1.当鼠标经过视频时，视频卡顿，音频继续 2. 第一个视频播放效果最好，但不如 chrome 好播放效果不佳，音频运行但视频卡顿/停止

3. 另外 2 个视频在 Chrome 中 1. 海报图像在视频 1 中可见，在视频 2 和 3 中不可见 - 您只看到控件 2.视频播放效果很好，当你把鼠标移到视频上时，没有卡顿...暂停和播放效果很好在所有 3 个视频上...

也许 ogg 格式不如 mp4 流畅？另外，我不清楚在一个页面上运行多个视频时所需的代码更改。我确实添加了一个 id，但没有相应的 css，所以我只是不清楚...

这是我正在使用的代码：

<video id="vid2" video controls= "controls" preload="metadata" width="640" height="360" poster="video-blog/clarkekoiblog-greenhouse.jpg" tabindex="0">
<source src="video-blog/clarkekoiblog-greenhouse.mp4" type="video/mp4"><!--for chrome,safari-->
<source src="video-blog/clarkekoiblog-greenhouse.ogv" type="video/ogg"><!--for firefox-->
<source src="video-blog/clarkekoiblog-greenhouse.webmvp8.webm" type="video/webm">
<p><em> If you do not see a video here, please refer to the info at the bottom of the page</em></p>
</video>

寻找注释，一个解决方案，使这项工作有效。谢谢

原文

Trying to get good html5 video on my site. here are the issues and observation, observed locally:

IN Firefox
1. when you pass the mouse over the video, video stutters, audio continues
2. the first video plays the best but not as well as in chrome
3. The 2 other videos don't play well, audio runs but video stutter/stops

In Chrome
1. Poster image visible on video 1, not visible on videos 2 and 3 - u just see the controls
2. video plays well, when you pass the mouse over the video, no stutter...pause and play works well
on all 3 videos...

Perhaps the ogg format is not as smooth as mp4 ? Also, I'm not clear on changes in code required when running more than 1 video on a page. I did add an id, but there is no corresponding css so I'm just not clear on that...

Here is the code I am using:

<video id="vid2" video controls= "controls" preload="metadata" width="640" height="360" poster="video-blog/clarkekoiblog-greenhouse.jpg" tabindex="0">
<source src="video-blog/clarkekoiblog-greenhouse.mp4" type="video/mp4"><!--for chrome,safari-->
<source src="video-blog/clarkekoiblog-greenhouse.ogv" type="video/ogg"><!--for firefox-->
<source src="video-blog/clarkekoiblog-greenhouse.webmvp8.webm" type="video/webm">
<p><em> If you do not see a video here, please refer to the info at the bottom of the page</em></p>
</video>

Looking for comments, a solution whatever to make this work.
THANK YOU

分享到QQ

分享到微博